Cara Mengambil Tangkapan Layar dengan Selenium

Selenium adalah alat yang hebat untuk pengujian browser, otomatisasi web, dan pengikisan web. Anda juga dapat menggunakan Selenium untuk mengambil tangkapan layar halaman web Anda. Ini sangat penting untuk menguji interface user (UI) situs web Anda di browser web yang berbeda.

Browser web yang berbeda menggunakan engine 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 mendesain 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 cara manual.

Prasyarat

Untuk mencoba perintah dan contoh yang dibahas dalam artikel ini, Anda harus memiliki:

1) Distribusi Linux (sebaiknya Ubuntu) diinstal pada komputer Anda.
2) Python 3 diinstal di komputer Anda.
3) PIP 3 diinstal pada komputer Anda.
4) Paket Pythonvirtualenvdiinstal pada 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 Introduction to Selenium with Python 3di 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-screenshot/, sebagai berikut:

$ mkdir -pv selenium-screenshot/{images,drivers}

Navigasikan ke selenium-screenshot/ direktori proyek, sebagai berikut:

$ cd selenium-screenshot/

Buat lingkungan virtual Python di direktori proyek, sebagai berikut:

$ virtualenv.venv

Aktifkan lingkungan virtual, sebagai berikut:

$ source.venv/bin/activate

Instal Selenium menggunakan PIP3, sebagai berikut:

$ pip3 install selenium

Download dan instal driver web yang diperlukan di drivers/direktori proyek. Saya menjelaskan proses mengdownload dan menginstal driver web di artikelIntroduction to Selenium with Python 3. Jika Anda memerlukan bantuan tentang hal ini, cariLinuxHint.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.

from selenium import webdriver
 from selenium.webdriver.common.keys import Keys
 googleChromeOptions = webdriver.chrome.options.Options()
 googleChromeOptions.headless = True
 googleChromeOptions.add_argument('--window-size=1280,720')
 googleChrome = webdriver.Chrome(executable_path="./drivers/chromedriver",
 options=googleChromeOptions)
 pageUrl = "https://www.w3schools.com";
 googleChrome.get(pageUrl)
 googleChrome.save_screenshot('images/w3schools_google-chrome.png')
 googleChrome.close()

Setelah selesai, simpan ex01_google-chrome.py skrip python.

Baris 4 membuat Options objek untuk browser web Google Chrome.

Baris 5 mengaktifkan cara tanpa kepala untuk Google Chrome.

Baris 6 mengatur ukuran jendela ke 1280×720 piksel.

Baris 8 membuat objek browser menggunakan driver Chrome dan menyimpannya di googleChrome variabel.

Baris 10 mendefinisikan a pageUrlvariabel. ItupageUrl variabel memegang URL halaman web yang akan diambil oleh Selenium.

Baris 11 memuat pageUrl di peramban.

Baris 12 menggunakan save_screenshot() metode untuk menyimpan tangkapan layar jendela browser ke file w3schools_google-chrome.png dalam images/ 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 images/ direktori proyek, seperti yang Anda lihat pada gambar di bawah.

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.

from selenium import webdriver
 from selenium.webdriver.common.keys import Keys
 firefoxOptions = webdriver.firefox.options.Options()
 firefoxOptions.headless = True
 firefoxOptions.add_argument('--width=1280')
 firefoxOptions.add_argument('--height=720')
 firefox = webdriver.Firefox(executable_path="./drivers/geckodriver", options=firefoxOptions)
 pageUrl = "https://www.w3schools.com";
 firefox.get(pageUrl)
 firefox.save_screenshot('images/w3schools_firefox.png')
 firefox.close()

Setelah selesai, simpan ex01_firefox.py skrip python.

Baris 4 membuat Options objek untuk browser web Firefox.

Baris 5 mengaktifkan cara 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 pageUrlvariabel. ItupageUrl variabel memegang URL halaman web yang akan diambil oleh Selenium.

Baris 13 memuat pageUrl di peramban.

Baris 14 menggunakan save_screenshot() metode untuk menyimpan tangkapan layar jendela browser ke file w3schools_firefox.png dalam images/ 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 images/ direktori proyek, seperti yang Anda lihat pada gambar di bawah.

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.

from selenium import webdriver
 from selenium.webdriver.common.keys import Keys
 pageUrl = "https://www.w3schools.com/";
 resolutions = [ '320,1080', '500,1080', '720,1080', '1366,1080', '1920,1080' ]
 for resolution in resolutions:
     print("Taking screenshot for resolution %s..." % (resolution.replace(',', 'x')))
     chromeOptions = webdriver.ChromeOptions()
     chromeOptions.headless = True
     chromeOptions.add_argument('--window-size=' + resolution)
     chrome = webdriver.Chrome(executable_path="./drivers/chromedriver", options=chromeOptions)
     chrome.get(pageUrl)
     outputImage = 'images/homepage_chrome_' + resolution.replace(',','_') + '.png'
     chrome.save_screenshot(outputImage)
     chrome.close()
     print('Saved to %s.' % (outputImage))

Setelah selesai, simpan ex02.py skrip python.

Baris 4 mendefinisikan a pageUrl variabel yang menyimpan URL halaman web yang ingin saya ambil tangkapan layarnya dalam resolusi layar yang berbeda.

$ python3 ex02.py