Halo
Pada artikel ini, saya ingin berbicara tentang pengalaman saya dalam mengotomatisasi pengujian regresi visual.
Pendahuluan
Saya memutuskan untuk melakukan otomatisasi pengujian visual setelah saya tidak sengaja menemukan bug kecil di tata letak. Proyek mengubah desain satu halaman, dan perubahan menyentuh halaman non-tugas.
Setelah memutuskan bahwa secara manual memeriksa tampilan halaman situs bukanlah suatu pilihan, saya memulai otomatisasi.
Kami membutuhkan solusi sederhana dengan laporan yang mudah. Agar dapat menulis autotest tanpa batasan apa pun, bandingkan tangkapan layar halaman dan elemen situs dan gunakan browser yang berbeda.
Setelah pencarian singkat untuk solusi / kerangka kerja siap pakai, diputuskan bahwa akan lebih mudah untuk menulis solusi Anda sendiri dengan fungsionalitas dan format laporan yang diperlukan. Dari opsi yang saya lihat, hanya Galen Framework yang cocok, tetapi saya menemukannya setelah saya menulis solusi.
Setelah menerapkan dan menguji autotest, saya memutuskan untuk sedikit memperbaiki tes dan membuat proyek terpisah, sehingga saya bisa menggunakannya nanti di situs dan proyek lain.
Tentang proyek
VisualRegressionBoilerplate adalah proyek yang relatif sederhana dengan struktur spesifik.
Sesuatu seperti template / proyek boilerplate untuk autotest visual.
Proyek ini ditujukan untuk situs / proyek kecil. Bagi mereka yang membutuhkan solusi sederhana, tanpa kerangka kerja yang kompleks.
Kemungkinan
- Perbandingan tangkapan layar dari halaman situs. Anda dapat menentukan satu atau beberapa item yang diabaikan.
- Perbandingan tangkapan layar elemen situs.
- Tes dapat dijalankan dengan lebar layar berbeda: seluler - 360px, tablet - 768px, desktop - 1920px
- Secara default, dua browser tersedia - chrome dan firefox + browser yang sama dalam mode tanpa kepala .
- Report generator - 4 screenshot dibuat untuk setiap tes - saat ini, diharapkan, perbedaan, gif. Jika tidak ada tangkapan layar yang diharapkan, tangkapan layar yang sebenarnya akan disimpan seperti yang diharapkan.
Teknologi yang digunakan
- Jawa
- Menguji
- Maven
- Webdriver selenium
- aShot - perpustakaan untuk membandingkan gambar
Bagaimana cara mulai bekerja dengan suatu proyek
- Instal java, maven, browser.
- Di konstruktor kelas DriverWrapper , Anda dapat menambah atau menghapus browser jika perlu
- Kelas TestConfig menyimpan semua pengaturan proyek - browser, ukuran jendela browser default, dll. Di sini Anda dapat menambah atau mengubah pengaturan.
- Di kelas BasePage , atur alamat situs yang diuji. Anda dapat mengatur alamat yang berbeda untuk lingkungan yang berbeda (dev, stage, prod). BasePage dan seluruh kelas dalam modul aplikasi adalah contoh dari pola objek halaman . Menggunakannya adalah opsional.
- Periksa kelas tes TestExample dan buat kelas tes Anda sendiri sebagai contoh.
- Tambahkan kelas tes baru ke testng.xml
- Jalankan tes dengan parameter yang diperlukan melalui pakar
- Periksa laporan di folder laporan
Dalam proyek
README , semuanya dijelaskan secara lebih rinci.
Cara menulis tes
Secara umum, seperti yang Anda inginkan. Tidak ada batasan. Anda dapat menggunakan pola
objek halaman atau yang lainnya.
Yang Anda butuhkan adalah menggunakan fungsi berikut untuk membandingkan tangkapan layar:
Untuk halaman:Perbandingan tangkapan layar halaman:
comparePageScreenshots("index_page");
Perbandingan tangkapan layar halaman dengan mengabaikan satu elemen:
comparePageScreenshots("index_page_ignored_element", IndexPage.MACKBOOK_BLOCK);
Perbandingan tangkapan layar halaman dengan mengabaikan beberapa elemen:
comparePageScreenshots("index_page_ignored_element", new String[]{"section.panel.features.dark", "div.macbook"});
Perbandingan tangkapan layar dari elemen halaman - elemen dapat dicari oleh locator css
compareElementScreenshots("index_page_element", IndexPage.FORGE_BLOCK);
Atau Anda bisa melewati objek kelas
WebElement compareElementScreenshots("index_page_element", driver.findElement(By.cssSelector("a.full.forge")));
Kemungkinan masalah
- Tes mungkin gagal karena konten dinamis di halaman. Masalahnya dipecahkan dengan mengabaikan elemen dengan konten dinamis.
- Pengujian mungkin gagal karena perbedaan beberapa piksel. Anda dapat memperbaikinya dengan mengedit pengaturan - TestConfig.allowableDiffSize .
- Terkadang semua gambar atau beberapa elemen di situs tidak memiliki waktu untuk memuat. Untuk memperbaikinya, saya menulis fungsi prepPageForScreenshot () di mana, menggunakan javaScript, halaman tersebut bergeser ke atas dan ke bawah. Tetapi ini tidak selalu membantu.
Ringkasan
Saat ini, proyek ini memiliki sekitar 50 tes - halaman dan elemen halaman yang berbeda.
Melalui bash script autotests diluncurkan dan situs diuji segera dalam tiga ekstensi (ponsel, tablet, desktop).
Ada beberapa masalah karena konten dinamis dan karena kenyataan bahwa beberapa elemen situs tidak selalu punya waktu untuk memuat tepat waktu, tetapi autotest dapat mengatasi tugas mereka.
Setiap perubahan pada tata letak langsung terlihat.
Tautan ke repositori proyek -
VisualRegressionBoilerplate