Phenquestions
Pelayar web yang berbeza menggunakan mesin rendering yang berbeza untuk membuat halaman web. Jadi, kod frontend yang sama mungkin tidak memberikan cara yang sama di semua penyemak imbas web. Untuk menyelesaikan masalah ini, anda mungkin perlu menambahkan beberapa kod frontend khusus penyemak imbas di laman web anda. Namun, itu bukan satu-satunya bahagian yang sukar ketika merancang laman web yang serasi dengan penyemak imbas dan peranti yang berbeza. Memeriksa secara manual penampilan laman web di setiap penyemak imbas yang disasarkan anda boleh memakan masa. Anda harus membuka semua penyemak imbas web yang disasarkan, mengunjungi halaman web, menunggu halaman dimuat, dan membandingkan halaman yang diberikan antara satu sama lain. Untuk menjimatkan masa, anda boleh menggunakan fitur tangkapan skrin Selenium untuk mengambil tangkapan skrin laman web anda secara automatik di setiap penyemak imbas yang anda sasarkan, dan membandingkan gambar sendiri. Itu jauh lebih pantas daripada kaedah manual. Artikel ini akan menunjukkan cara mengambil tangkapan skrin tetingkap penyemak imbas menggunakan Selenium.
Prasyarat
Untuk mencuba perintah dan contoh yang dibincangkan dalam artikel ini, anda mesti mempunyai:
1) Sebaran Linux (sebaiknya Ubuntu) dipasang di komputer anda.
2) Python 3 dipasang pada komputer anda.
3) PIP 3 dipasang pada komputer anda.
4) Pakej Python virtualenv dipasang pada komputer anda.
5) Penyemak imbas web Mozilla Firefox dan Google Chrome yang dipasang di komputer anda.
6) Pengetahuan tentang cara memasang Pemacu Firefox Gecko dan Pemandu Web Chrome pada sistem anda.
Untuk memenuhi syarat 4, 5, dan 6, anda boleh membaca artikel saya Pengenalan Selenium dengan Python 3 di Linuxhint.com.
Anda boleh menemui banyak artikel lain mengenai topik yang diperlukan di LinuxHint.com. Pastikan anda membaca artikel ini sekiranya anda memerlukan bantuan tambahan.
Menyiapkan Direktori Projek
Untuk memastikan semuanya teratur, buat direktori projek baru selenium-tangkapan skrin /, seperti berikut:
$ mkdir -pv selenium-tangkapan skrin / gambar, pemacu
Navigasi ke selenium-tangkapan skrin / direktori projek, seperti berikut:
$ cd selenium-tangkapan skrin /
Buat persekitaran maya Python dalam direktori projek, seperti berikut:
$ virtualenv .venv
Aktifkan persekitaran maya, seperti berikut:
sumber $ .venv / bin / aktifkan
Pasang Selenium menggunakan PIP3, seperti berikut:
$ pip3 memasang selenium
Muat turun dan pasang pemacu web yang diperlukan di pemandu / direktori projek. Saya menerangkan proses memuat turun dan memasang pemacu web dalam artikel tersebut Pengenalan Selenium dengan Python 3. Sekiranya anda memerlukan bantuan mengenai perkara ini, cari LinuxHint.com untuk artikel ini.
Asas Mengambil Tangkapan Skrin dengan Selenium
Bahagian ini akan memberi anda contoh yang sangat mudah untuk mengambil tangkapan skrin penyemak imbas dengan Selenium.
Pertama, buat skrip Python baru ex01_google-chrome.py dan taipkan baris kod berikut dalam skrip.
dari pemacu web import seleniumdari selenium.pemacu laman web.biasa.kunci import Kekunci
googleChromeOptions = pemacu web.krom.pilihan.Pilihan ()
googleChromeOptions.tanpa kepala = Betul
googleChromeOptions.add_argument ('- ukuran tetingkap = 1280,720')
googleChrome = pemacu laman web.Chrome (executable_path = "./ pemacu / chromedriver ",
pilihan = googleChromeOptions)
pageUrl = "https: // www.w3sekolah.com ";
googleChrome.dapatkan (pageUrl)
googleChrome.save_screenshot ('gambar / w3schools_google-chrome.png ')
googleChrome.tutup ()
Setelah selesai, simpan ex01_google-chrome.py Skrip Python.
Baris 4 mencipta sebuah Pilihan objek untuk penyemak imbas web Google Chrome.
Baris 5 membolehkan mod tanpa kepala untuk Google Chrome.
Baris 6 menetapkan ukuran tetingkap kepada 1280 × 720 piksel.
Baris 8 membuat objek penyemak imbas menggunakan pemacu Chrome dan menyimpannya di googleChrome pemboleh ubah.
Baris 10 mentakrifkan a halamanUrl pemboleh ubah. The halamanUrl pemboleh ubah menyimpan URL laman web yang akan ditayangkan oleh Selenium.
Baris 11 memuatkan halamanUrl di penyemak imbas.
Baris 12 menggunakan save_screenshot () kaedah untuk menyimpan tangkapan skrin tetingkap penyemak imbas ke fail w3schools_google-chrome.png di dalam gambar / direktori projek.
Akhirnya, Baris 14 menutup penyemak imbas.
Seterusnya, jalankan ex01_google-chrome.py Skrip Python, seperti berikut:
$ python3 ex01_google-chrome.py
Setelah berjaya melaksanakan skrip, tangkapan skrin akan disimpan ke fail gambar w3schools_google-chrome.png di dalam gambar / direktori projek, seperti yang anda lihat dalam tangkapan skrin di bawah.
Untuk mengambil tangkapan skrin dari laman web yang sama tetapi dalam penyemak imbas web Firefox, buat skrip Python baru ex01_firefox.py dan taipkan baris kod berikut dalam skrip.
dari pemacu web import seleniumdari selenium.pemacu laman web.biasa.kunci import Kekunci
firefoxOptions = pemacu web.firefox.pilihan.Pilihan ()
firefoxOptions.tanpa kepala = Betul
firefoxOptions.add_argument ('- lebar = 1280')
firefoxOptions.add_argument ('- tinggi = 720')
firefox = pemacu laman web.Firefox (boleh dilaksanakan_path = "./ driver / geckodriver ", options = firefoxOptions)
pageUrl = "https: // www.w3sekolah.com ";
firefox.dapatkan (pageUrl)
firefox.save_screenshot ('gambar / w3schools_firefox.png ')
firefox.tutup ()
Setelah selesai, simpan ex01_firefox.py Skrip Python.
Baris 4 mencipta sebuah Pilihan objek untuk penyemak imbas web Firefox.
Baris 5 membolehkan mod tanpa kepala untuk Firefox.
Baris 6 menetapkan lebar tetingkap penyemak imbas menjadi 1280 piksel, dan baris 7 menetapkan ketinggian tetingkap penyemak imbas hingga 720 piksel.
Baris 9 membuat objek penyemak imbas menggunakan pemacu Firefox Gecko dan menyimpannya di firefox pemboleh ubah.
Baris 11 mentakrifkan a halamanUrl pemboleh ubah. The halamanUrl pemboleh ubah menyimpan URL laman web yang akan ditayangkan oleh Selenium.
Garis 13 memuatkan halamanUrl pada penyemak imbas.
Baris 14 menggunakan save_screenshot () kaedah untuk menyimpan tangkapan skrin tetingkap penyemak imbas ke fail w3schools_firefox.png di dalam gambar / direktori projek.
Akhirnya, Talian 15 menutup penyemak imbas.
Seterusnya, jalankan ex01_firefox.py Skrip Python, seperti berikut:
$ python3 ex01_firefox.py
Pada pelaksanaan skrip yang berjaya, tangkapan skrin harus disimpan ke fail gambar w3schools_firefox.png di dalam gambar / direktori projek, seperti yang anda lihat dalam tangkapan skrin di bawah.
Mengambil Tangkapan Skrin Resolusi Skrin yang berbeza
Bahagian ini akan menunjukkan kepada anda cara mengambil tangkapan skrin dari laman web yang sama dalam resolusi skrin yang berbeza. Di bahagian ini, saya akan menggunakan penyemak imbas web Google Chrome, tetapi anda boleh menggunakan Firefox atau penyemak imbas lain untuk bahagian ini.
Pertama, buat skrip Python baru ex02.py dan taipkan baris kod berikut dalam skrip.
dari pemacu web import seleniumdari selenium.pemacu laman web.biasa.kunci import Kekunci
pageUrl = "https: // www.w3sekolah.com / ";
resolusi = ['320,1080', '500,1080', '720,1080', '1366,1080', '1920,1080']
untuk ketetapan dalam resolusi:
cetak ("Mengambil tangkapan skrin untuk resolusi% s ..."% (resolusi.ganti (',', 'x')))
chromeOptions = pemacu web.Pilihan Chrome ()
chromeOptions.tanpa kepala = Betul
chromeOptions.add_argument ('- window-size =' + resolusi)
chrome = pemacu web.Chrome (executable_path = "./ driver / chromedriver ", options = chromeOptions)
krom.dapatkan (pageUrl)
outputImage = 'gambar / laman utama_krom_' + resolusi.ganti (',', '_') + '.png '
krom.save_screenshot (outputImage)
krom.tutup ()
cetak ('Disimpan ke% s.'% (outputImage))
Setelah selesai, simpan ex02.py Skrip Python.
Baris 4 mentakrifkan a halamanUrl pemboleh ubah yang menyimpan URL laman web yang saya ingin mengambil tangkapan skrin dalam resolusi skrin yang berbeza.
Baris 5 mentakrifkan a ketetapan senarai yang mengandungi senarai resolusi yang ingin saya ambil tangkapan skrin.
Baris 7 berulang melalui setiap resolusis di ketetapan senarai.
Di dalam gelung, Baris 8 mencetak mesej yang bermakna di konsol.
Garis 10-15 membuat objek penyemak imbas dengan resolusi dari lelaran gelung semasa dan menyimpannya di krom pemboleh ubah.
Baris 17 memuatkan halamanUrl di penyemak imbas.
Baris 19 menghasilkan jalur gambar, di mana tangkapan skrin akan disimpan, dan menyimpan gambar di Keluaran keluaran pemboleh ubah.
Baris 20 mengambil tangkapan skrin tetingkap penyemak imbas dan menyimpannya di jalan Keluaran keluaran.
Baris 21 menutup penyemak imbas.
Baris 22 mencetak mesej yang bermakna pada konsol dan mengakhiri gelung.
Kemudian, gelung bermula semula dengan resolusi skrin seterusnya (i.e., item senarai seterusnya).
Seterusnya, jalankan ex02.py Skrip Python, seperti berikut:
$ python3 ex02.py
Skrip Python ex02.py harus mengambil tangkapan skrin URL yang diberikan dalam setiap resolusi skrin yang dipilih.
Tangkapan skrin dari w3sekolah.com dalam lebar 320 piksel.
Tangkapan skrin dari w3sekolah.com dalam lebar 500 piksel.
Tangkapan skrin dari w3sekolah.com dalam lebar 720 piksel.
Tangkapan skrin dari w3sekolah.com dalam lebar 1366 piksel.
Tangkapan skrin dari w3sekolah.com pada lebar 1920 piksel.
Sekiranya anda membandingkan tangkapan skrin, anda akan melihat bahawa UI berubah dengan lebar tetingkap penyemak imbas. Dengan menggunakan ciri tangkapan skrin Selenium, anda dapat melihat bagaimana laman web anda kelihatan pada resolusi skrin yang berbeza dengan cepat dan mudah.
Kesimpulannya
Artikel ini menunjukkan kepada anda beberapa asas mengambil tangkapan skrin menggunakan Selenium dan pemacu web Chrome dan Firefox. Artikel tersebut juga menunjukkan cara mengambil tangkapan layar dalam resolusi layar yang berbeza. Ini akan membantu anda memulakan dengan ciri tangkapan skrin Selenium.
