Phenquestions
Browser web yang berbeda menggunakan mesin rendering yang berbeda untuk merender halaman web. Jadi, kode frontend yang sama mungkin tidak dirender dengan cara yang sama di semua browser web. Untuk memperbaiki masalah ini, Anda mungkin perlu menambahkan beberapa kode frontend khusus browser di situs web Anda. Namun, itu bukan satu-satunya bagian yang sulit ketika merancang situs web yang kompatibel dengan berbagai browser dan perangkat. Memeriksa secara manual bagaimana tampilan situs web di setiap browser yang Anda targetkan dapat memakan waktu. Anda harus membuka semua browser web yang ditargetkan, mengunjungi halaman web, menunggu halaman dimuat, dan membandingkan halaman yang dirender satu sama lain. Untuk menghemat waktu, Anda dapat menggunakan fitur tangkapan layar Selenium untuk secara otomatis mengambil tangkapan layar situs web Anda di setiap browser yang Anda targetkan, dan membandingkan gambar itu sendiri. Itu jauh lebih cepat daripada metode manual. Artikel ini akan menunjukkan kepada Anda cara mengambil tangkapan layar jendela browser menggunakan Selenium.
Prasyarat
Untuk mencoba perintah dan contoh yang dibahas dalam artikel ini, Anda harus memiliki:
1) Distribusi Linux (lebih disukai Ubuntu) diinstal pada komputer Anda.
2) Python 3 diinstal di komputer Anda.
3) PIP 3 diinstal di komputer Anda.
4) Paket Python virtualenv terinstal di komputer Anda.
5) Mozilla Firefox dan browser web Google Chrome terpasang di komputer Anda.
6) Pengetahuan tentang cara menginstal Firefox Gecko Driver dan Chrome Web Driver di sistem Anda.
Untuk memenuhi persyaratan 4, 5, dan 6, Anda dapat membaca artikel saya Pengenalan Selenium dengan Python 3 di Linuxhint.com.
Anda dapat menemukan banyak artikel lain tentang topik yang diperlukan di LinuxHint.com. Pastikan untuk memeriksa artikel ini jika Anda memerlukan bantuan tambahan.
Menyiapkan Direktori Proyek
Untuk menjaga semuanya tetap teratur, buat direktori proyek baru selenium-tangkapan layar/, sebagai berikut:
$ mkdir -pv Selenium-screenshot/images,drivers
Navigasikan ke selenium-tangkapan layar/ direktori proyek, sebagai berikut:
$ cd selenium-tangkapan layar/
Buat lingkungan virtual Python di direktori proyek, sebagai berikut:
$ virtualenv .venv
Aktifkan lingkungan virtual, sebagai berikut:
$ sumber .venv/bin/aktifkan
Instal Selenium menggunakan PIP3, sebagai berikut:
$pip3 instal selenium
Unduh dan instal driver web yang diperlukan di pengemudi/ direktori proyek. Saya menjelaskan proses mengunduh dan menginstal driver web di artikel Pengenalan Selenium dengan Python 3. Jika Anda memerlukan bantuan tentang hal ini, cari LinuxPetunjuk.com untuk artikel ini.
Dasar-dasar Mengambil Tangkapan Layar dengan Selenium
Bagian ini akan memberi Anda contoh yang sangat sederhana untuk mengambil tangkapan layar browser dengan Selenium.
Pertama, buat skrip Python baru ex01_google-chrome.py dan ketik baris kode berikut dalam skrip.
dari selenium impor webdriverdari selenium.webdriver.umum.kunci impor Kunci
googleChromeOptions = webdriver.krom.pilihan.Pilihan()
googleChromeOptions.tanpa kepala = Benar
googleChromeOptions.add_argument('--window-size=1280,720')
googleChrome = webdriver.Chrome(executable_path="./driver/chromedriver",
opsi=googleChromeOptions)
pageUrl = "https://www.w3schools.com";
googleChrome.dapatkan (halamanUrl)
googleChrome.save_screenshot('images/w3schools_google-chrome.png')
googleChrome.Menutup()
Setelah selesai, simpan ex01_google-chrome.py skrip python.
Baris 4 membuat Pilihan objek untuk browser web Google Chrome.
Baris 5 mengaktifkan mode tanpa kepala untuk Google Chrome.
Baris 6 mengatur ukuran jendela menjadi 1280×720 piksel.
Baris 8 membuat objek browser menggunakan driver Chrome dan menyimpannya di googleChrome variabel.
Baris 10 mendefinisikan a Halaman URL variabel. Itu Halaman URL variabel memegang URL halaman web yang akan diambil oleh Selenium.
Baris 11 memuat Halaman URL di browser.
Baris 12 menggunakan simpan_screenshot() metode untuk menyimpan tangkapan layar jendela browser ke file w3schools_google-chrome.png dalam gambar-gambar/ direktori proyek.
Akhirnya, Baris 14 menutup browser.
Selanjutnya, jalankan ex01_google-chrome.py Script Python, sebagai berikut:
$ python3 ex01_google-chrome.py
Pada eksekusi skrip yang berhasil, tangkapan layar akan disimpan ke file gambar w3schools_google-chrome.png dalam gambar-gambar/ direktori proyek, seperti yang Anda lihat pada tangkapan layar di bawah ini.
Untuk mengambil tangkapan layar dari situs web yang sama tetapi di browser web Firefox, buat skrip Python baru ex01_firefox.py dan ketik baris kode berikut dalam skrip.
dari selenium impor webdriverdari selenium.webdriver.umum.kunci impor Kunci
firefoxOptions = webdriver.firefox.pilihan.Pilihan()
firefoxOptions.tanpa kepala = Benar
firefoxOptions.add_argument('--width=1280')
firefoxOptions.add_argument('--height=720')
firefox = webdriver.Firefox(executable_path="./drivers/geckodriver", opsi = firefoxOptions)
pageUrl = "https://www.w3schools.com";
firefox.dapatkan (halamanUrl)
firefox.save_screenshot('images/w3schools_firefox.png')
firefox.Menutup()
Setelah selesai, simpan ex01_firefox.py skrip python.
Baris 4 membuat Pilihan objek untuk browser web Firefox.
Baris 5 mengaktifkan mode tanpa kepala untuk Firefox.
Baris 6 mengatur lebar jendela browser menjadi 1280 piksel, dan baris 7 mengatur tinggi jendela browser menjadi 720 piksel.
Baris 9 membuat objek browser menggunakan driver Firefox Gecko dan menyimpannya di firefox variabel.
Baris 11 mendefinisikan a Halaman URL variabel. Itu Halaman URL variabel memegang URL halaman web yang akan diambil oleh Selenium.
Baris 13 memuat Halaman URL di browser.
Baris 14 menggunakan simpan_screenshot() metode untuk menyimpan tangkapan layar jendela browser ke file w3schools_firefox.png dalam gambar-gambar/ direktori proyek.
Akhirnya, Baris 15 menutup browser.
Selanjutnya, jalankan ex01_firefox.py Script Python, sebagai berikut:
$ python3 ex01_firefox.py
Pada eksekusi skrip yang berhasil, tangkapan layar harus disimpan ke file gambar w3schools_firefox.png dalam gambar-gambar/ direktori proyek, seperti yang Anda lihat pada tangkapan layar di bawah ini.
Mengambil Tangkapan Layar dari Berbagai Resolusi Layar
Bagian ini akan menunjukkan kepada Anda cara mengambil tangkapan layar dari halaman web yang sama dalam resolusi layar yang berbeda. Di bagian ini, saya akan menggunakan browser web Google Chrome, tetapi Anda dapat menggunakan Firefox atau browser lain untuk bagian ini.
Pertama, buat skrip Python baru ex02.py dan ketik baris kode berikut dalam skrip.
dari selenium impor webdriverdari selenium.webdriver.umum.kunci impor Kunci
pageUrl = "https://www.w3schools.com/";
resolusi = [ '320,1080', '500,1080', '720,1080', '1366,1080', '1920,1080' ]
untuk resolusi dalam resolusi:
print("Mengambil tangkapan layar untuk resolusi %s… " % (resolusi.ganti(',', 'x')))
chromeOptions = webdriver.Opsi Chrome()
chromeOptions.tanpa kepala = Benar
chromeOptions.add_argument('--window-size=' + resolusi)
chrome = webdriver.Chrome(executable_path="./driver/chromedriver", opsi = chromeOptions)
krom.dapatkan (halamanUrl)
outputImage = 'gambar/homepage_chrome_' + resolusi.ganti(',','_') + '.png'
krom.save_screenshot(Gambar keluaran)
krom.Menutup()
print('Disimpan ke %s.'% (Gambar keluaran))
Setelah selesai, simpan ex02.py skrip python.
Baris 4 mendefinisikan a Halaman URL variabel yang menyimpan URL halaman web yang ingin saya ambil tangkapan layarnya dalam resolusi layar yang berbeda.
Baris 5 mendefinisikan a resolusi daftar yang berisi daftar resolusi yang ingin saya ambil tangkapan layarnya.
Baris 7 mengulangi melalui masing-masing resolusis di resolusi daftar.
Di dalam loop, Baris 8 mencetak pesan yang berarti di konsol.
Baris 10-15 membuat objek browser dengan resolusi dari iterasi loop saat ini dan menyimpannya di krom variabel.
Baris 17 memuat Halaman URL di browser.
Baris 19 menghasilkan jalur gambar, tempat tangkapan layar akan disimpan, dan menyimpan gambar di gambar keluaran variabel.
Baris 20 mengambil tangkapan layar dari jendela browser dan menyimpannya di jalur gambar keluaran.
Baris 21 menutup browser.
Baris 22 mencetak pesan yang berarti di konsol dan mengakhiri loop.
Kemudian, loop dimulai lagi dengan resolusi layar berikutnya (i.e., item daftar berikutnya).
Selanjutnya, jalankan ex02.py Script Python, sebagai berikut:
$ python3 ex02.py
Skrip Python ex02.py harus mengambil tangkapan layar dari URL yang diberikan di setiap resolusi layar yang dipilih.
Tangkapan layar dari w3schools.com dalam lebar 320 piksel.
Tangkapan layar dari w3schools.com dalam lebar 500 piksel.
Tangkapan layar dari w3schools.com dalam lebar 720 piksel.
Tangkapan layar dari w3schools.com dalam lebar 1366 piksel.
Tangkapan layar dari w3schools.com dalam lebar 1920 piksel.
Jika Anda membandingkan tangkapan layar, Anda akan melihat bahwa UI berubah dengan lebar jendela browser. Dengan menggunakan fitur tangkapan layar Selenium, Anda dapat melihat tampilan situs web Anda pada resolusi layar yang berbeda dengan cepat dan mudah.
Kesimpulan
Artikel ini menunjukkan kepada Anda beberapa dasar pengambilan tangkapan layar menggunakan Selenium dan driver web Chrome dan Firefox. Artikel tersebut juga menunjukkan kepada Anda cara mengambil tangkapan layar dalam resolusi layar yang berbeda. Ini akan membantu Anda memulai dengan fitur tangkapan layar Selenium.
