Internet dengan Cypress: Senario Dunia Sebenar dari Taman Permainan 'Internet' Heroku

Baru-baru ini saya pergi ke chatGPT dan bertanya apakah beberapa latihan automasi yang baik, selepas beberapa ketika bekerja pada sistem yang sama, atau menyediakan automasi untuk jenis aliran pengguna tertentu sahaja, kami akhirnya boleh melupakan beberapa perkara, jadi saya bertanya tentang beberapa tapak untuk berlatih dan saya mendapati internet.
Dan walaupun tapak mungkin kelihatan asas, mereka masih menawarkan tempat untuk anda mencuba beberapa automasi dan buat masa ini, itu sahaja yang saya perlukan. Saya meluangkan sedikit masa dan menangani beberapa cabaran web klasik menggunakan Cypress.
Jadi, tanpa berlengah lagi, mari kita selami beberapa senario yang saya automatikkan, meliputi segala-galanya daripada butang yang datang dan pergi seperti sihir, seret dan lepas pelik, automasi berkaitan fail dan beberapa kerja Shadow DOM yang pantas!

1. Seret dan Lepas: Jika anda pernah mencuba untuk mengautomasikan drag-and-drop, anda tahu bahawa ia tidak pernah semudah yang kelihatan. Walaupun Cypress mempunyai sokongan asli untuk interaksi tertentu (dan saya telah mencubanya lol), ia masih memerlukan sedikit kreativiti untuk mendapatkan ujian drag-and-drop di sini.

Dalam kes ini, saya bereksperimen dengan perintah dragAndDrop tersuai, menggunakan trigger('mousedown'), trigger('dragover'), dan trigger('mouseup'). Disebabkan oleh cara kefungsian itu dilaksanakan pada tapak ini, saya terpaksa menggali sedikit lebih dalam untuk memastikan ujian ini berfungsi, tetapi nampaknya untuk kebanyakan apl moden, pemalam cypress sepatutnya mencukupi (bersyukur).

1. Tambah/Alih Keluar Elemen:

Butang "Tambah Elemen" dalam latihan ini adalah mudah secara teori, tetapi lucu bagaimana taman permainan ini kadang-kadang cuba mengacaukan jangkaan anda, haha. Klik sekali, dan kemudian... Butang padam muncul (yang tidak sangat intuitif tetapi oh baik, anda hanya perlu bergolek dengannya). Caranya ialah untuk memastikan kami mengendalikan tarian tambah-buang dengan cara yang stabil dan boleh diulang dalam ujian kami. Dengan Cypress, kami menyemak sama ada butang itu muncul, menambah beberapa lagi, dan kemudian mengalih keluarnya satu demi satu, memastikan urutan itu tidak bercelaru.

Petua Pro:
Elemen penjejakan yang muncul dan hilang boleh menjadi rumit, tetapi pernyataan Cypress .should('exist') dan .should('not.exist') mengendalikan perkara ini dengan baik. Selain itu, anda mendapat pengesahan visual yang manis setiap kali.

1. Kandungan Dinamik:

Saya rasa ini adalah contoh paling ringkas pada artikel ini, tetapi ia masih boleh menarik, ideanya hanyalah untuk mencipta ujian yang akan memastikan format kandungan akan tetap, walaupun kandungannya akan sentiasa berubah... masih boleh berguna untuk pembelajaran walaupun.

Cypress boleh mengesahkan elemen dimuatkan seperti yang diharapkan tanpa terlalu memilih tentang kandungan sebenar, yang memastikan ujian itu berdaya tahan.

1. Kawalan Dinamik:

Untuk yang ini kawalan seperti kotak pilihan dan butang muncul atau hilang berdasarkan interaksi pengguna. Sesetengah memerlukan menunggu penunjuk pemuatan hilang. Di sini, cy.wait Cypress dan .should('be.visible') adalah kuncinya.

Petua Pantas:

Daripada menunggu berkod keras, gunakan penegasan seperti .should('exist') dan .should('be.disabled') untuk bertindak balas terhadap status halaman. Ini menjadikan ujian lebih teguh dan boleh disesuaikan.

1. Muat Turun Fail:

Memuat turun fail mungkin kedengaran mudah sehingga anda perlu membuktikan ia benar-benar berlaku. Dengan Cypress terdapat perkara berbeza yang boleh kita lakukan untuk memastikan fail benar-benar Dimuat Turun.

Kami boleh melakukan perkara yang berbeza untuk memastikan muat turun berjaya dilakukan, untuk aplikasi ini, saya hanya memastikan bahawa kami mempunyai fail pada folder muat turun selepas mengklik pada pautan. Ia sangat mudah, sebaik sahaja fail itu ada, ujian lulus secara automatik. Strategi lain boleh digunakan seperti menggunakan cy.intercept untuk mengesahkan bahawa permintaan muat turun telah dicetuskan sebagai contoh.

1. Muat Naik Fail: Sama seperti muat turun fail, muat naik fail sangat lancar dengan Cypress.

Untuk senario jenis ini, anda boleh menggunakan sesuatu seperti cypress-file-upload
yang merupakan pemalam yang sangat baik dan berguna, dan sahkan bahawa fail tersebut diproses oleh apl.

Pada contoh saya, semua yang dilakukan adalah melalui arahan .selectFile dan terdapat cara untuk melakukannya tanpa menghantar fail sebenar, hanya menggunakan Cypress.Buffer sepatutnya melakukan silap mata (anda boleh melihat pelaksanaan di dalam repositori yang dipautkan di bawah).

Dan ini berkesan untuk muat naik yang dilakukan melalui klik butang serta untuk muat naik seret dan lepas, sangat mudah... terima kasih cypress ?.

1. DOM Bayang:

Misteri Shadow DOM ialah elemen seperti rahsia di dalam DOM utama. Mereka tersimpan dan tidak mengikut peraturan keterlihatan CSS biasa, yang boleh menjadi agak rumit bergantung pada cara anda perlu menjalankan automasi padanya. Syukurlah, Cypress menyokong arahan bayang-bayang untuk menembusi tudung ini dan mencari unsur-unsur tersembunyi itu.

Untuk ujian ini, saya menggunakan cy.get('element').shadow() untuk mengakses elemen dalam Shadow DOM, dan kemudian, tiada lagi isu atau kesukaran, anda boleh mengakses dan melakukan penegasan pada elemen seperti yang anda lakukan dengan yang biasa.

---

Dan itu sahaja buat masa ini.. hanya 6 contoh ringkas tentang cara kami boleh menggunakan Cypress untuk menangani beberapa penggunaan automasi pelayar asas, dan cara memanfaatkannya untuk menjadikan hidup anda lebih mudah apabila menangani kes sedemikian .

Bersedia untuk Mencubanya?

Jika anda berminat untuk mencuba ujian ini atau menyesuaikannya untuk projek anda, saya telah menyediakan kod itu pada repo GitHub saya. Suite ujian adalah sangat ringan jadi tidak sepatutnya terdapat terlalu banyak titik keraguan padanya dan kami mempunyai aliran Tindakan GitHub, yang boleh anda gunakan supaya anda dapat melihat cara semuanya berfungsi dalam tindakan! Terima kasih, jumpa lagi di lain kali!

Atas ialah kandungan terperinci Internet dengan Cypress: Senario Dunia Sebenar dari Taman Permainan 'Internet' Heroku. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!