Ujian Regresi Visual dengan Phantomcss

Takeaways Key

Phantomcss adalah alat Node.js yang melakukan ujian regresi visual, yang merupakan bentuk ujian automatik yang memeriksa jika elemen halaman web muncul seperti yang dimaksudkan. Ia melakukan ini dengan mengambil tangkapan skrin halaman atau elemen tertentu, membandingkannya dengan imej asas yang disimpan, dan mencipta imej perbezaan jika tangkapan skrin tidak sepadan.
Phantomcss dibina di atas beberapa komponen, termasuk Casperjs untuk berinteraksi dengan pelayar Phantomcss atau SlimerJS, Phantomjs 2 atau SlimerJs sebagai pelayar tanpa kepala, dan menyerupai.js untuk membandingkan imej.
• Untuk menggunakan phantomcss, suite ujian dicipta dalam bentuk skrip node.js. Suite ujian membuka halaman yang diperlukan, mengambil tangkapan skrin, dan membandingkannya dengan imej dari larian sebelumnya. Jika perubahan dibuat ke laman web, ujian boleh dijalankan semula untuk membandingkan tangkapan skrin baru ke asal.
• Jika perubahan visual dikesan semasa ujian, PhantomCSS menyoroti kawasan yang telah diubah. Untuk menerima perubahan ini, arahan ujian boleh dijalankan dengan hujah tambahan -rebase. Ini menggantikan imej asas sebelumnya dengan yang baru.
If you’ve done any serious development in your career you’ve likely reached the point when you realized the importance of automated testing during development. Depending on your experience, this realization might hit you in one big burst or it may gently come to you over time, but it will eventually become second nature. Automatic testing comes in many forms, from unit testing, when you test isolated pieces of code, to integration and functional testing, when you test how different parts of your system behave together. Artikel ini bukan mengenai gambaran mengenai ujian automatik secara umum. Ia adalah mengenai niche tertentu dan yang agak baru yang dirujuk sebagai

ujian regresi visual

. Visual regression testing takes an alternative approach to testing web pages. Instead of just making sure that some element or a text value is present in the DOM, the test actually opens the page and checks if this specific block

looks exactly like you want it to

. Just to make sure that you picked up the difference, let me give you an example. Imagine, that you want your website to greet your visitors with a friendly message:

<span><span><span><div</span>></span>Hello, %username%!<span><span></div</span>></span></span>

Untuk memastikan ia berfungsi, anda boleh (dan harus) menguji unit sekeping kod yang menghasilkan mesej, memeriksa bahawa ia memasukkan nama yang betul. Anda juga boleh menulis ujian berfungsi menggunakan selenium atau protractor untuk melihat sama ada elemen sebenarnya terdapat pada halaman dengan teks yang betul. Tetapi ini tidak mencukupi. Kami mahu menguji bukan hanya bahawa teks dijana dengan betul atau muncul di DOM tetapi untuk memastikan bahawa seluruh elemen kelihatan betul , iaitu, memastikan bahawa elemen itu tidak tersembunyi oleh paparan: tiada atau itu Seseorang tidak secara tidak sengaja mengatasi warna teks. Terdapat beberapa alat untuk melakukannya, tetapi hari ini kita akan melihat satu pilihan khususnya - Phantomcss.

Apa itu Phantomcss?

Phantomcss adalah alat Node.js untuk melakukan ujian regresi visual. Ia adalah sumber terbuka dan dibangunkan oleh lelaki di Huddle. Phantomcss membolehkan anda menjalankan pelayar tanpa kepala, buka halaman dan ambil tangkapan skrin keseluruhan halaman atau elemen tertentu pada halaman. Tangkapan skrin ini akan disimpan sebagai imej asas untuk rujukan masa depan. Setiap kali anda menukar apa -apa di laman web, anda boleh menjalankan Phantomcss sekali lagi. Ia akan mengambil tangkapan skrin lain dan membandingkannya dengan imej asal. Sekiranya tiada perbezaan yang dijumpai, ujian akan lulus. Jika, bagaimanapun, tangkapan skrin tidak sepadan, ujian akan gagal dan imej baru yang menunjukkan perbezaan akan dibuat untuk anda semak semula. Pendekatan ini menjadikan alat ini sempurna untuk menguji perubahan dalam CSS.

Casperjs - Alat untuk berinteraksi dengan penyemak imbas Phantomcss atau SlimerJS. Ia membolehkan anda membuka halaman dan melakukan interaksi pengguna, seperti mengklik pada butang atau memasukkan nilai. Di samping itu, Casperjs menyediakan rangka kerja ujian sendiri dan keupayaan untuk menangkap tangkapan skrin halaman.
Phantomjs 2 atau SlimerJs - dua pelayar tanpa kepala yang berbeza, salah satu yang boleh digunakan dengan Phantomcss. Penyemak imbas tanpa kepala adalah seperti penyemak imbas biasa tanpa antara muka pengguna.
menyerupai.js - perpustakaan untuk membandingkan imej.

Phantomcss boleh digunakan bersama -sama dengan kedua -dua Phantomjs dan SlimerJs, tetapi dalam artikel ini, kami akan menggunakan Phantomjs.

mari kita ambil untuk putaran

mari kita sediakan projek ujian kecil untuk melihat bagaimana kita boleh menggunakan alat ini dalam amalan. Untuk itu, kami memerlukan laman web untuk menguji dan pelayan web node.js mudah untuk Casperjs dapat membuka halaman.

menyediakan projek ujian

Buat fail index.html dengan beberapa kandungan sampel:

<span><span><!doctype html></span>
</span><span><span><span><html</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><span><span><style</span>></span><span>
</span></span><span><span>      <span><span>.tag</span> {
</span></span></span><span><span>        <span>color: #fff;
</span></span></span><span><span>        <span>font-size: 30px;
</span></span></span><span><span>        <span>border-radius: 10px;
</span></span></span><span><span>        <span>padding: 10px;
</span></span></span><span><span>        <span>margin: 10px;
</span></span></span><span><span>        <span>width: 500px;
</span></span></span><span><span>      <span>}
</span></span></span><span><span>
</span></span><span><span>      <span><span>.tag-first</span> {
</span></span></span><span><span>        <span>background: lightcoral;
</span></span></span><span><span>      <span>}
</span></span></span><span><span>
</span></span><span><span>      <span><span>.tag-second</span> {
</span></span></span><span><span>        <span>background: lightskyblue;
</span></span></span><span><span>      <span>}
</span></span></span><span><span>    </span><span><span></style</span>></span>
</span>  <span><span><span></head</span>></span>
</span>
  <span><span><span><body</span>></span>
</span>    <span><span><span><div</span> class<span>="tag tag-first"</span>></span>The moving finger writes, and having written moves on.<span><span></div</span>></span>
</span>    <span><span><span><div</span> class<span>="tag tag-second"</span>></span>Nor all thy piety nor all thy wit, can cancel half a line of it.<span><span></div</span>></span>
</span>  <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span></span>

untuk memasang pelayan web, memulakan projek NPM dan pasang pakej http-server.

<span>npm init
</span><span>npm install http-server --save-dev</span>

Untuk menjalankan pelayan, mari kita tentukan skrip NPM yang mudah. Cukup tambahkan bahagian skrip berikut ke pakej.json

<span><span><span><div</span>></span>Hello, %username%!<span><span></div</span>></span></span>

Sekarang anda boleh menjalankan NPM bermula dari folder projek dan halaman indeks akan dapat diakses pada alamat lalai http://127.0.0.1:8080. Mulakan pelayan dan biarkan ia berjalan buat masa ini. Kami akan memerlukannya dalam seketika.

Memasang Phantomcss

Memasang Phantomcss adalah mudah, yang perlu anda lakukan ialah menambah beberapa kebergantungan untuk projek anda:

<span><span><!doctype html></span>
</span><span><span><span><html</span>></span>
</span>  <span><span><span><head</span>></span>
</span>    <span><span><span><style</span>></span><span>
</span></span><span><span>      <span><span>.tag</span> {
</span></span></span><span><span>        <span>color: #fff;
</span></span></span><span><span>        <span>font-size: 30px;
</span></span></span><span><span>        <span>border-radius: 10px;
</span></span></span><span><span>        <span>padding: 10px;
</span></span></span><span><span>        <span>margin: 10px;
</span></span></span><span><span>        <span>width: 500px;
</span></span></span><span><span>      <span>}
</span></span></span><span><span>
</span></span><span><span>      <span><span>.tag-first</span> {
</span></span></span><span><span>        <span>background: lightcoral;
</span></span></span><span><span>      <span>}
</span></span></span><span><span>
</span></span><span><span>      <span><span>.tag-second</span> {
</span></span></span><span><span>        <span>background: lightskyblue;
</span></span></span><span><span>      <span>}
</span></span></span><span><span>    </span><span><span></style</span>></span>
</span>  <span><span><span></head</span>></span>
</span>
  <span><span><span><body</span>></span>
</span>    <span><span><span><div</span> class<span>="tag tag-first"</span>></span>The moving finger writes, and having written moves on.<span><span></div</span>></span>
</span>    <span><span><span><div</span> class<span>="tag tag-second"</span>></span>Nor all thy piety nor all thy wit, can cancel half a line of it.<span><span></div</span>></span>
</span>  <span><span><span></body</span>></span>
</span><span><span><span></html</span>></span></span>

Membuat Suite Ujian

Sekarang kita mempunyai segala yang kita perlukan untuk menyediakan suite ujian pertama. Suite ujian Phantomcss dibuat dalam bentuk skrip Node.js di mana anda membuka halaman yang diperlukan di laman web anda, mengambil tangkapan skrin dan bandingkan dengan imej dari larian sebelumnya. Kami bermula dengan kes ujian mudah berdasarkan demo dari Phantomcss sendiri.

<span>npm init
</span><span>npm install http-server --save-dev</span>

Ujian akan dibuka http://127.0.0.1:8080/, ambil tangkapan skrin elemen badan dan simpan di bawah tangkapan skrin/body.png.

Apabila kita mempunyai ujian itu sendiri, semua yang tersisa adalah untuk menentukan skrip untuk menjalankan ujian. Mari tambahkan skrip berikut ke Package.json Seterusnya untuk memulakan:

<span>"scripts": {
</span>  <span>"start": "http-server"
</span><span>},</span>

anda kini boleh menjalankannya dengan melaksanakan arahan berikut:

<span>npm install phantomcss casperjs phantomjs-prebuilt --save-dev</span>

output yang anda akan lihat harus kelihatan seperti ini:

<span>var phantomcss = require('phantomcss');
</span>
<span>// start a casper test
</span>casper<span>.test.begin('Tags', function(test) {
</span>
  phantomcss<span>.init({
</span>    <span>rebase: casper.cli.get('rebase')
</span>  <span>});
</span>
  <span>// open page
</span>  casper<span>.start('http://127.0.0.1:8080/');
</span>
  <span>// set your preferred view port size
</span>  casper<span>.viewport(1024, 768);
</span>
  casper<span>.then(function() {
</span>      <span>// take the screenshot of the whole body element and save it under "body.png". The first parameter is actually a CSS selector
</span>      phantomcss<span>.screenshot('body', 'body');
</span>  <span>});
</span>
  casper<span>.then(function now_check_the_screenshots() {
</span>    <span>// compare screenshots
</span>    phantomcss<span>.compareAll();
</span>  <span>});
</span>
  <span>// run tests
</span>  casper<span>.run(function() {
</span>    <span>console.log('\nTHE END.');
</span>    casper<span>.test.done();
</span>  <span>});
</span><span>});</span>

Oleh kerana anda telah menjalankan ujian untuk kali pertama, ia hanya akan membuat tangkapan skrin asas baru dan tidak akan melakukan apa -apa perbandingan. Teruskan dan mengintip ke dalam folder tangkapan skrin. Anda harus melihat gambar seperti ini:

Ini adalah standard keemasan bagaimana laman web anda sepatutnya kelihatan dan eksekusi masa depan ujian akan membandingkan hasilnya dengan imej ini.

memperkenalkan regresi

Jika anda menjalankan arahan ujian yang sama sekali lagi, ia akan melaporkan bahawa semua ujian telah lulus dengan jayanya:

<span>"test": "casperjs test test.js"</span>

Ini diharapkan kerana kami tidak mengubah apa -apa di laman web. Mari memecahkan sesuatu dan menjalankan semula ujian lagi. Cuba ubah beberapa gaya dalam index.html, sebagai contoh, mengurangkan saiz blok ke 400px. Sekarang mari kita jalankan lagi dan lihat apa yang berlaku:

<span>npm test</span>

Beberapa perkara penting telah berlaku di sini. Pertama, phantomcss melaporkan bahawa ujian gagal kerana ketidakcocokan untuk screenshot body_0.png. Ketidakcocokan diukur pada 11.41%. Kedua, perbezaan antara semasa dan versi terdahulu disimpan dalam folder Kegagalan. Jika anda membukanya, anda akan melihat tangkapan skrin seperti ini:

tangkapan skrin dengan mudah menyoroti kawasan yang telah diubah sehingga mudah untuk melihat perbezaannya.

Menerima perubahan

Sekarang perbezaannya telah diserlahkan, apa yang harus kita lakukan untuk menerima perubahan itu? Kita sepatutnya dapat memberitahu alat yang kita mahu melekat dengan lebar yang dikurangkan dari blok dan menerima pandangan semasa sebagai standard baru. Untuk melakukan itu, anda boleh menjalankan arahan ujian dengan argumen tambahan ---Rebase:

<span><span><span><div</span>></span>Hello, %username%!<span><span></div</span>></span></span>

Perhatikan dua salur ganda. Ia adalah cara NPM untuk meluluskan parameter ke perintah yang mendasari. Jadi arahan berikut akan menghasilkan ujian ujian casperjs.js --rebase. Sekarang kita telah menerima perubahan itu, imej asas sebelumnya akan digantikan dengan yang baru.

mengambilnya lebih jauh

Sekarang bahawa anda telah mendapat asas asas, anda boleh mula berfikir tentang mengintegrasikan alat ini ke dalam aliran kerja anda sendiri. Saya tidak akan masuk ke dalam butirannya kerana ia cukup khusus projek, tetapi di sini adalah beberapa soalan untuk merenung tentang:

• Adakah anda akan menjalankan ujian terhadap laman web sebenar, atau beberapa jenis panduan gaya, di mana hanya elemen UI yang berasingan?
Adakah laman web anda mempunyai kandungan dinamik? Jika ya, maka perubahan kandungan akan menyebabkan ujian pecah. Untuk mengelakkannya, anda perlu menyediakan versi laman web yang berasingan dengan konteks statik untuk menjalankan ujian terhadapnya.
Adakah anda akan menambah tangkapan skrin ke dalam kawalan versi anda? Ya, anda harus.
• adakah anda akan mengambil tangkapan skrin halaman keseluruhan, atau elemen berasingan?
Menggunakan alat ini, anda kini boleh menutup aspek visual laman web anda dengan ujian automatik. Dengan unit dan ujian fungsi anda sudah ada, strategi baru ini akan mengisi jurang sempit di sempadan ujian anda. Walaupun anda masih baru untuk menguji - ini adalah tempat yang baik untuk bermula!

Soalan Lazim (Soalan Lazim) Mengenai Ujian Regresi Visual dengan Phantomcss

Apakah phantomcss dan bagaimana ia berfungsi? Ia berfungsi dengan mengambil tangkapan skrin laman web anda, membandingkannya dengan imej asas, dan menonjolkan perbezaan. Ini membolehkan pemaju dengan cepat mengenal pasti dan memperbaiki ketidakkonsistenan visual di laman web mereka. Phantomcss sangat berguna dalam projek-projek besar di mana ujian manual boleh memakan masa dan rawan ralat.

Bagaimana saya memasang Phantomcss? pengurus. Anda boleh memasangnya secara global dengan menjalankan perintah NPM Install -g Phantomcss. Sebagai alternatif, anda boleh menambahkannya sebagai kebergantungan pembangunan kepada projek anda dengan menjalankan pemasangan NPM-SAVE-DEV Phantomcss.

Bagaimana saya menggunakan phantomcss untuk ujian regresi visual?

Untuk menggunakan phantomcss untuk ujian regresi visual, anda perlu membuat skrip ujian yang memberitahu Phantomcss apa yang hendak menangkap tangkapan skrin. Skrip ini boleh ditulis dalam JavaScript atau CoffeeScript. Sebaik sahaja skrip siap, anda boleh menjalankannya menggunakan Phantomjs. Phantomcss kemudian akan menangkap tangkapan skrin unsur -unsur yang ditentukan, membandingkannya dengan imej asas, dan menghasilkan laporan yang menunjukkan perbezaan. digunakan dengan kerangka ujian lain seperti Mocha, Jasmine, dan Qunit. Ia juga boleh diintegrasikan dengan sistem integrasi yang berterusan seperti Jenkins dan Travis CI. Ia mengautomasikan proses menangkap dan membandingkan tangkapan skrin, menjimatkan pemaju banyak masa. Ia juga menyediakan laporan visual yang menjadikannya mudah untuk melihat perbezaan antara imej asas dan ujian. Selain itu, phantomcss menyokong ujian reka bentuk responsif, yang membolehkan pemaju menguji laman web mereka pada saiz skrin yang berbeza. Anda hanya perlu memadam imej asas lama dan menjalankan skrip ujian sekali lagi. Phantomcss akan menangkap tangkapan skrin baru dan menggunakannya sebagai imej asas yang baru. Ia membolehkan pemaju menentukan kelewatan sebelum menangkap tangkapan skrin, memberikan kandungan dinamik yang cukup untuk memuatkan. Ia juga menyokong penggunaan panggilan balik untuk menunggu peristiwa tertentu sebelum menangkap tangkapan skrin. It can log messages to the console, save failed tests as image files, and even create a video of the test run. Ciri -ciri ini menjadikannya lebih mudah untuk mengenal pasti dan membetulkan isu -isu dalam ujian anda. You can set the comparison type, the mismatch tolerance, and the output settings. Ini memberi anda lebih banyak kawalan ke atas proses perbandingan dan membolehkan anda menyesuaikannya dengan keperluan khusus anda. visual regression testing, including BackstopJS, Wraith, and Gemini. These tools offer similar features to PhantomCSS, but they may have different strengths and weaknesses depending on your specific needs.

Atas ialah kandungan terperinci Ujian Regresi Visual dengan Phantomcss. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!