Model Objek Halaman Langkah Demi Langkah di Cypress dengan Contoh

Model Objek Halaman, umumnya dikenal sebagai POM, adalah pola populer dalam kerangka otomatisasi apa pun. Model Objek Halaman juga dapat diterapkan di Cypress. Model Objek Halaman memiliki banyak keuntungan dalam membuat kerangka kerja untuk otomatisasi pengujian, seperti mengurangi duplikasi kode dan meningkatkan kemampuan pemeliharaan dan keterbacaan. Cypress memberi kita fleksibilitas untuk memasukkan Model Objek Halaman dalam skrip pengujian. Pada artikel ini, kita akan melihat cara membuat Model Objek Halaman di Langkah cemara langkah dengan contoh.

Daftar Isi:

model objek halaman cemara
Model Objek Halaman Cypress

Apa itu Model Objek Halaman?

Model Objek Halaman adalah pola desain di mana objek halaman dipisahkan dari skrip pengujian otomatisasi. Pengujian otomatisasi memberi kami banyak pengaruh yang menguntungkan kami dalam pengujian; namun, ada beberapa hasil seperti duplikasi kode dan peningkatan risiko pemeliharaan seiring pertumbuhan proyek. Mari kita memahami pentingnya POM dengan sebuah contoh.

Pertimbangkan kami memiliki beberapa halaman dalam aplikasi kami seperti Halaman Login, Halaman Pendaftaran, dan halaman Pesan Penerbangan.

  • Halaman Login berisi semua elemen web dari fungsi login
  • Pendaftaran berisi semua metode dan elemen web dari proses pendaftaran
  • Penerbangan Pesan berisi elemen web dari halaman pemesanan penerbangan

Ada tiga test case yaitu TC1, TC2, dan TC3.

  • TC1 berisi kasus uji login.
  • TC2 berisi kasus uji login dan registrasi
  • TC3 berisi login, pendaftaran, dan uji kasus pemesanan penerbangan
Contoh tanpa POM

Sekarang, halaman login berinteraksi dengan TC1.

Halaman pendaftaran perlu berinteraksi dengan TC1 dan TC2, dan

Halaman pemesanan penerbangan perlu berinteraksi dengan TC1, TC2, dan TC3

Seperti yang Anda lihat, ada fungsionalitas umum di antara ketiga kasus uji. Alih-alih menulis metode dan pencari login di semua file kasus uji, kita dapat memilikinya secara terpisah dan mengaksesnya di seluruh file. Dengan cara ini, kode tidak diulang, dan mudah dibaca.

Salah satu praktik terbaik dalam pengkodean adalah konsep yang disebut KERING. Itu berarti Jangan Ulangi Diri Sendiri. Seperti yang dinyatakan dengan jelas oleh formulir lengkap, kita tidak boleh mengulangi baris kode lagi dan lagi. Untuk mengatasi hal ini, Model Objek Halaman memainkan peran penting dalam praktik pengkodean terbaik.

Arsitektur Kerangka Model Objek Halaman

The kerangka model objek halaman arsitektur adalah arsitektur terbukti yang dapat menyesuaikan dengan metode sederhana. Saat ini, hampir semua perusahaan mengikuti metodologi tangkas, yang melibatkan integrasi, pengembangan, dan pengujian berkelanjutan. Penguji otomatisasi mempertahankan kerangka pengujian untuk bekerja bersama proses pengembangan dengan Model Objek Halaman. Ini adalah signifikan pola desain dalam mempertahankan kerangka uji otomatisasi sebagai kode tumbuh dengan fitur baru.

Objek halaman adalah pola desain yang merupakan kelas berorientasi objek yang berinteraksi dengan halaman aplikasi yang kami uji. Objek Halaman terdiri dari Kelas Halaman serta Uji kasusKelas halaman terdiri dari metode dan pencari untuk berinteraksi dengan elemen web. Kami membuat kelas terpisah untuk setiap halaman dalam aplikasi. Kami akan membuat metode individual untuk setiap fungsi dan mengaksesnya di file spesifikasi kami.

Model Objek Halaman

Keuntungan menggunakan Model Objek Halaman di Cypress

  1. Metodenya adalah dapat digunakan kembali di seluruh proyek dan mudah dirawat saat proyek berkembang. Baris kode menjadi kurang dibaca serta dioptimalkan.
  2. Pola Objek Halaman menyarankan agar kita memisahkan operasi dan aliran yang kami tampilkan di UI dari verifikasi Langkah. Ketika kita mengikuti pola POM, kita cenderung menulis kode yang bersih dan mudah dimengerti.
  3. Dengan Model Objek Halaman, objek serta kasus uji adalah independen satu sama lain. Kita bisa memanggil objek di mana saja di seluruh proyek. Dengan cara ini, jika kita menggunakan alat yang berbeda seperti TestNG/JUnit untuk pengujian fungsional atau Mentimun untuk pengujian penerimaan, maka dengan mudah dapat diakses.

Langkah Demi Langkah Halaman Model Objek Cypress dengan Contoh

Bagian ini akan memahami cara membuat Model Objek Halaman di Cypress dengan contoh waktu nyata yang dapat kita terapkan dalam proyek. Kami akan memahami dari pengaturan dasar dan proses langkah demi langkah untuk membuat Model Objek Halaman.

Mari kita bahas skenario di mana kita akan menulis fungsi dalam contoh ini.

  1. Navigasi ke https://admin-demo.nopcommerce.com/ situs web
  2. Masukkan nama pengguna dan kata sandi yang valid
  3. Klik pada Tombol Masuk
  4. Validasi URL apakah itu ditambahkan dengan /admin setelah masuk

Kami akan membuat dua file – satu file PageObject dan satu file spesifikasi untuk contoh ini. Mari kita mulai!

Langkah 1: Buka proyek kami dalam kode VS. Buat folder bernama HalamanObjek bawah integrasi map. Di bawah folder ini, Anda dapat membuat file objek halaman untuk modul apa pun.

Folder baru bernama PageObject

Langkah 2: Buat file bernama Halaman Masuk.js bawah HalamanObjek map. Di LoginPage.js, kita akan menulis metode yang melibatkan fungsionalitas login.

Pembuatan LoginPage.js di bawah folder PageObject

Langkah 3: Mari kita mulai menulis metode pengujian pertama kita di Halaman Login.js mengajukan. Pertama-tama kita harus membuat kelas yang akan kita ekspor dalam file spesifikasi kita. Kami akan memanggil kelas kami sebagai Halaman masuk

halaman Login kelas {}

Berdasarkan pseudocode kami, langkah pertama kami adalah menavigasi ke URL. Kami akan memanggil metode kami sebagai navigate(). Di dalam metode navigasi kami, kami akan menambahkan cy.visit() fungsi dari Cypress.

 navigasi() { cy.visit('https://admin-demo.nopcommerce.com/') }

metode navigasi

Langkah 4: Sekarang, kita harus memasukkan nama pengguna di bidang email kita. Kami akan menamai metode kami sebagai masukan email(). Pertama, kita harus mendapatkan pencari bidang email dan mengaksesnya melalui cy.get() memerintah. Kemudian kita akan mengosongkan bidang menggunakan clear() perintah dan tambahkan nama pengguna menggunakan type() memerintah. Dalam metode kami, kami melewati parameter nama pengguna untuk meneruskan nilai dalam file spesifikasi. Dengan cara ini, kami membuatnya tetap umum untuk mengakses metode ini jika id email yang berbeda diperlukan.

enterEmail(nama pengguna) { cy.get('[id=Email]').clear() cy.get('[id=Email]').type(namapengguna); kembalikan ini }

Alih-alih menulis cy.get() perintah dua kali dalam kode di atas, kita cukup mengulangnya dengan dot operator.

  enterEmail(nama pengguna) { cy.get('[id=Email]') .clear() .type(namapengguna); kembalikan ini }

masukkan metode email

Anda mungkin telah memperhatikan return this di baris 9. ini menunjukkan bahwa masukan email metode milik tertentu Halaman masuk kelas. Pada dasarnya, ini mewakili kelas.

Langkah 5: Kita harus membuat metode untuk kata sandi yang mirip dengan metode enterEmail kita. Kami akan memanggil metode kata sandi kami sebagai enterPassword(). Awalnya, kita akan mendapatkan locator untuk kata sandi, kosongkan bidang dan ketik nilai input. Kami akan meneruskan parameter ke metode kami yang disebut pswd dan akses di type() perintah.

enterPassword(pswd) { cy.get('[id=Password]') .clear() .type(pswd) kembalikan ini }
masukkan metode kata sandi

Langkah 6: Metode terakhir kami adalah mengklik tombol login. Kami akan menamai metode kami sebagai submit(). Kami akan mendapatkan locator dan klik tombol menggunakan click() metode dari Cypress.

 kirim() { cy.get('[type=kirim]').klik() }

metode pengiriman

Langkah 7: Sekarang, kita harus mengekspor kelas ini untuk menggunakannya di seluruh file spesifikasi kita. Untuk ini, kami hanya menambahkan satu baris di luar kelas kami, dan kami dapat dengan mudah mengaksesnya di file spesifikasi kami.

ekspor Halaman Masuk default

perintah ekspor

Hore! Kami telah membuat file Objek Halaman untuk proyek kami. Itu cukup sederhana dan mudah!

Mengakses Objek Halaman dalam file Spec

Sekarang mari kita beralih ke file test case kita. Kita harus membuat file spesifikasi di folder integrasi kita. Kami akan memanggil file spesifikasi kami POMDemo.spec.js.

Pembuatan file POMDemo.spec.js

Langkah 1: Untuk mengakses metode kami di file LoginPage.js, kami harus mengimpor mereka ke dalam file spesifikasi kami. Kami mengimpor dengan menggunakan pernyataan impor. Kita harus menavigasi ke file LoginPage.js dengan menggunakan ../

Dalam kasus kami, jalannya adalah ../integration/PageObject/LoginPage. Jadi, pernyataan impor akan terlihat seperti di bawah ini.

impor LoginPage dari "../integration/PageObject/LoginPage"

Langkah 2: Karena kami menggunakan Mocha, kami akan menulis test case kami di dalamnya describe() serta it() memblokir. deskripsikan() mewakili a rangkaian pengujian, dan it() mewakili a Kasus cobaan. Kedua blok adalah fungsi dan menerima parameter string yang menyertakan deskripsi dari ujian.

deskripsikan("Cypress POM Test Suite", function () {})

Jelaskan blok

Di dalam blok deskripsi, kami akan menulis it() dengan menambahkan deskripsi sebagai login dengan kredensial yang valid.

it("Masuk dengan kredensial yang valid", function() {})

itu memblokir

Langkah 3: Untuk mengakses metode kami dari file objek Halaman kami, kami harus membuat sebuah instance untuk kelas Login kami. Untuk membuat instance untuk kelas login, kita harus mendeklarasikan variabel dan menetapkannya ke file kelas kita menggunakan baru kata kunci. Dengan variabel yang dideklarasikan, kita dapat dengan mudah mengakses metode dari file objek Halaman.

                                               const login = halaman Login baru();
Contoh kelas

Note: Dengan variabel login, kita dapat mengakses metode dari kelas objek Halaman. Saat kita mulai mengetik login. , vscode akan mencantumkan saran dari semua metode yang tersedia di file LoginPage.js. Ini membantu kami memverifikasi bahwa kami telah mengekspor dan mengimpor kelas kami dengan benar!

Langkah 4: Mari kita panggil kami navigate() metode untuk mengunjungi URL. Ini adalah tindakan pertama dalam kasus uji kami.

/// import LoginPage dari "./PageObject/LoginPage" mendeskripsikan("Cypress POM Test Suite", function () { it("Login dengan kredensial yang valid", function () { const login = new LoginPage(); login.navigate(); }); });

Langkah 5: Kita harus memasukkan nama pengguna di bidang email. Kami mengakses enterEmail() pada pengatur terkenal. Pengatur ini menawarkan bantuan hukum kepada traderapabila trader berselisih dengan broker yang terdaftar dengan mereka. masuk obyek. enterEmail() metode menerima parameter nama pengguna. Jadi kita harus memberikan nilai untuk nama pengguna sebagai tali dalam file spesifikasi kami

/// import LoginPage dari "./PageObject/LoginPage" mendeskripsikan("Cypress POM Test Suite", function () { it("Login dengan kredensial yang valid", function () { const login = new LoginPage(); login.navigate(); login.enterEmail('admin@tokoanda.com'); }) })

Langkah 6: Mirip dengan langkah 5, kita harus memanggil enterPassword() metode dengan melewatkan kata sandi sebagai parameter dalam string.

/// import LoginPage dari "./PageObject/LoginPage" mendeskripsikan("Cypress POM Test Suite", function () { it("Login dengan kredensial yang valid", function () { const login = new LoginPage(); login.navigate(); login.enterEmail('admin@tokoanda.com'); login.enterPassword('admin'); }) })

Langkah 7: Selanjutnya, kita harus mengklik tombol login. Kami akan memanggil metode submit() dari file objek halaman kami.

/// import LoginPage dari "./PageObject/LoginPage" mendeskripsikan("Cypress POM Test Suite", function () { it("Login dengan kredensial yang valid", function () { const login = new LoginPage(); login.navigate(); login.enterEmail('admin@tokoanda.com'); login.enterPassword('admin'); login.kirim(); }) })

Langkah 8: Setelah login, kita harus menegaskan URL. Kami akan memverifikasi apakah URL-nya sama ke URL setelah login. Untuk penegasan, kita akan menggunakan chai perpustakaan pernyataan, yang terintegrasi dengan Cypress.

/// import LoginPage dari "./PageObject/LoginPage" mendeskripsikan("Cypress POM Test Suite", function () { it("Login dengan kredensial yang valid", function () { const login = new LoginPage(); login.navigate(); login.enterEmail('admin@yourstore.com'); login.enterPassword('admin'); login.submit(); cy.url().should('be.equal', 'https://admin-demo .nopcommerce.com/admin/') }) })

Kasus uji masuk

Gambar di atas mewakili kasus uji login. Kami dapat menulis kasus uji dengan Model Objek Halaman dengan sangat sedikit langkah sederhana. Sekarang mari kita jalankan test case dan lihat hasilnya.

Kami akan membuka pelari uji Cypress dan mengklik file spesifikasi dan menjalankan kasus uji kami. Periksa ini artikel tentang cara membuka pelari uji Cypress.

Hasil Tes di Cypress

Hore! Kami telah berhasil menulis kasus uji yang menggunakan Model Objek Halaman di Cypress. Kita dapat menggabungkan pola ini dalam proyek waktu nyata. Ada banyak cara kita dapat menulis metode dalam file objek halaman. Saya telah menunjukkan kepada Anda contoh yang standar dan berfungsi untuk proyek apa pun. Anda juga dapat menulis hanya fungsi pengembalian di file objek halaman dan kemudian klik dan mengetik langsung di file spesifikasi kami.

Kita akan melihat pola lain yang dapat kita gunakan dalam proyek. Metode ini juga akan bekerja dengan sangat baik.

Dalam tipe ini, kami hanya akan mengembalikan fungsi locator dalam metode kami dan melakukan tindakan dalam file pengujian. Kami akan menulis kode untuk skenario yang sama seperti yang kami lihat di atas.

Objek Halaman – LoginPage.js

class LoginPage { navigasi() { cy.visit('https://admin-demo.nopcommerce.com/') } enterEmail() { return cy.get('[id=Email]') } enterPassword() { return cy.get('[id=Password]') } submit() { return cy.get('[type=submit]') } } ekspor Halaman Login default

Seperti yang kita lihat di atas, kita hanya menulis locator di dalam fungsi kita dan mengembalikannya. Pengembalian menyatakan bahwa metode tertentu milik halaman Login kelas.js. Kami tidak menambahkan tindakan apa pun dalam metode kami.

Contoh File Objek Halaman

File Spesifikasi – POMDemo.spec.js

Kami akan melihat contoh mengakses metode dalam file spesifikasi.

/// import LoginPage dari "./PageObject/LoginPage" mendeskripsikan("Cypress POM Test Suite", function () { it("Login dengan kredensial yang valid", function () { const login = new LoginPage(); login.navigate(); login.enterEmail().clear() login.enterEmail().type('admin@yourstore.com'); login.enterPassword().clear() login.enterPassword().type('admin'); login. submit().click(); cy.url().should('be.equal', 'https://admin-demo.nopcommerce.com/admin/') }); });

Contoh file spesifikasi

Di sini, kami memanggil metode dari file PageObject dan melakukan tindakan kasus uji. Jadi pertama, kami memanggil variabel referensi kami masuk dan kemudian menambahkannya dengan metode enterEmail() dan akhirnya menambahkan aksi mengetik. Dalam kami type(), kami melewati nama pengguna nilai.

Hasil Uji

Seperti yang Anda lihat, semua perintah telah dieksekusi, dan kasus uji telah berlalu!

Anda dapat memilih Model Objek Halaman mana saja yang sesuai dengan proyek dan pendapat Anda. Tidak ada aturan khusus untuk hanya berpegang pada satu prosedur.

Bagaimana cara menggunakan Fixtures sebagai Sumber Data Uji di Model Objek Halaman di Cypress?

Dalam contoh Model Objek Halaman kami, kami meneruskan nilai nama pengguna dan kata sandi secara langsung di file Objek Halaman atau langsung di file kasus uji. Bagian ini akan memahami cara menggunakan perlengkapan di Cypress agar data tetap aman dan tidak terekspos. Kita harus mencoba menyimpan semua kredensial dan data dalam satu file dan mengaksesnya. Dengan cara ini, perawatannya mudah, dan data sensitif seperti nama pengguna dan kata sandi tidak terekspos. Metode ini juga merupakan salah satu prosedur yang perlu kita ikuti dalam Pola Objek Halaman.

Seperti dibahas sebelumnya, Fixture membantu menyimpan data dalam file JSON atau file excel, atau perpustakaan eksternal seperti Apache POI. Kami akan menggunakan data ini dengan membuat variabel dan mengaksesnya di file spesifikasi kami. Mari kita pahami dengan sebuah contoh.

Cypress menyediakan folder bernama “perlengkapan.” Kami akan membuat JSON file bernama Surat kepercayaan.json di bawah folder 'Perlengkapan'.

pembuatan file JSON

Mari kita nyatakan nama pengguna, kata sandi, dan nilai URL yang perlu kita validasi dalam format JSON di kredensial.json file.

{ "nama pengguna" : "admin@tokoanda.com", "sandi" : "admin", "adminUrl" : "https://admin-demo.nopcommerce.com/admin/" }

Melewati nilai dalam file kredensial.json

Mengakses nilai dari file JSON dalam file kasus uji

Karena kami telah mendefinisikan nilai dalam file JSON kami, kami akan mengaksesnya dalam file kasus pengujian kami menggunakan perlengkapan dari Sipres. Kami akan mengakses nilai JSON dengan ini kata kunci. Mari kita bungkus fungsi fixture dalam a sebelum() blok.

deskripsikan("Cypress POM Test Suite", function () { sebelum(fungsi () { cy.fixture('credentials').then(function (testdata) { this.testdata = testdata }) })

cy.fixture('credentials').lalu(fungsi (testdata) { this.testdata = testdata }) – garis ini menunjukkan bahwa kita melewati kredensial.json file sebagai parameter untuk . kami cy.fixture() memerintah. Di sini, kita tidak diharuskan untuk melewati apakah itu file JSON. Cukup lewati nama file saja. Nanti kita lulus data percobaan sebagai parameter dalam fungsi dan mengakses data percobaan variabel menggunakan ini.

/// import LoginPage from "./PageObject/LoginPage" explain("Cypress POM Test Suite", function () { before(function () { cy.fixture('credentials').then(function (testdata) { this.testdata = testdata }) }) it("Login dengan kredensial yang valid", function () { const login = new LoginPage(); login.navigate(); login.enterEmail(this.testdata.username) login.enterPassword(this.testdata.password ) login.submit(); cy.url().should('be.equal', this.testdata.adminUrl) }); });

login.enterEmail(ini.testdata.namapengguna) – Ini akan mengambil nilai nama pengguna dari file kredensial.json dan mengisinya ke dalam bidang email.

login.enterPassword(ini.testdata.password) – Ini akan mengambil nilai kata sandi dari file kredensial.json dan mengisinya ke dalam bidang kata sandi

cy.url().should('be.equal', this.testdata.adminUrl) – Ini akan mendapatkan adminUrl dari file kredensial.json dan memvalidasi dalam pernyataan

Melewati data dari file JSON ke file spesifikasi

Sekarang, mari kita jalankan test case untuk hasilnya.

Hasil tes

Seperti yang bisa kita lihat, kasus uji telah dieksekusi dan telah berlalu. Contoh ini akan membantu Anda menulis kasus uji berbasis Data dasar. Anda dapat memasukkannya ke dalam proyek Anda menggunakan metode ini. Anda dapat membuat file JSON baru di bawah folder Fixture, menambahkan nilai yang terkait dengan data pengujian, dan mengaksesnya di semua file pengujian.

FAQ

Apakah Cypress mendukung Model Objek Halaman?

Tentu saja. Cypress memberikan semua fleksibilitas untuk bermain-main dengan halaman dan objek dalam repositori. Hal ini mudah untuk diterapkan.

Model Objek Halaman mana yang harus saya gunakan dari contoh di atas?

Tidak ada aturan khusus untuk hanya berpegang pada satu cara Model Objek Halaman. Anda dapat menggunakan model apa saja yang telah dibahas di atas. Anda bebas menyesuaikan model sesuai dengan proyek Anda.

Mengapa saya harus menggunakan perlengkapan di Model Objek Halaman di Cypress?

Fixture membantu menyimpan data sensitif seperti nama pengguna, kata sandi, dan URL dalam file terpisah seperti JSON atau excel. Ini memastikan keamanan aplikasi dan mengaksesnya dengan mudah di file apa pun di seluruh proyek. Untuk mengakses file JSON, kami menggunakan perlengkapan untuk menggunakannya dalam file spesifikasi kami.

Gulir ke Atas