Mengklik Elemen di Selenium menggunakan JavaScript

1. Pengenalan

Dalam tutorial ringkas ini, kita akan melihat contoh ringkas cara mengklik dan elemen di Selenium WebDriver menggunakan JavaScript.

Untuk demo kami, kami akan menggunakan JUnit dan Selenium untuk membuka //baeldung.com dan mencari artikel "Selenium".

2. Kebergantungan

Pertama, kami menambahkan kebergantungan selenium-java dan junit ke projek kami di pom.xml :

 org.seleniumhq.selenium selenium-java 3.141.59   junit junit 4.13 test 

3. Konfigurasi

Seterusnya, kita perlu mengkonfigurasi WebDriver. Dalam contoh ini, kami akan menggunakan pelaksanaan Chrome:

@Before public void setUp() { System.setProperty("webdriver.chrome.driver", new File("src/main/resources/chromedriver.mac").getAbsolutePath()); driver = new ChromeDriver(); }

Kami menggunakan kaedah yang diberi penjelasan dengan @Sebelum melakukan persediaan awal sebelum setiap ujian. Di dalamnya kita menetapkan harta webdriver.chrome.driver yang menentukan lokasi pemandu chrome. Selepas itu, kami memberi contoh objek WebDriver .

Apabila ujian selesai, kita harus menutup tetingkap penyemak imbas. Kita boleh melakukannya dengan meletakkan penyataan driver.close () dalam kaedah yang dianotasi dengan @After . Ini memastikan ia akan dilaksanakan walaupun ujian gagal:

@After public void cleanUp() { driver.close(); }

4. Membuka Penyemak Imbas

Sekarang, kita boleh membuat ujian kes yang akan melakukan langkah pertama kita - buka laman web:

@Test public void whenSearchForSeleniumArticles_thenReturnNotEmptyResults()  driver.get("//baeldung.com"); String title = driver.getTitle(); assertEquals("Baeldung 

Di sini, kami menggunakan kaedah driver.get () untuk memuatkan laman web. Seterusnya, kami mengesahkan tajuknya untuk memastikan kami berada di tempat yang betul.

5. Mengklik Elemen Menggunakan JavaScript

Selenium dilengkapi dengan kaedah klik WebElement # yang berguna yang memanggil acara klik pada elemen tertentu. Tetapi dalam beberapa kes, tindakan klik tidak mungkin dilakukan.

Salah satu contohnya ialah jika kita mahu mengklik elemen yang dilumpuhkan. Sekiranya demikian, klik WebElement # melemparkan IllegalStateException . Sebagai gantinya, kita boleh menggunakan sokongan JavaScript Selenium.

Untuk melakukan ini, perkara pertama yang kita perlukan adalah JavascriptExecutor . Oleh kerana kami menggunakan implementasi ChromeDriver , kami hanya dapat menggunakannya sesuai yang kami perlukan:

JavascriptExecutor executor = (JavascriptExecutor) driver;

Setelah mendapat JavascriptExecutor , kita dapat menggunakan kaedah executeScript . Argumennya adalah skrip itu sendiri dan pelbagai parameter skrip. Dalam kes kami, kami menggunakan kaedah klik pada argumen pertama:

executor.executeScript("arguments[0].click();", element);

Sekarang, mari kita meletakkan bersama-sama ke dalam kaedah tunggal yang kita akan memanggil clickElement :

private void clickElement(WebElement element) { JavascriptExecutor executor = (JavascriptExecutor) driver; executor.executeScript("arguments[0].click();", element); }

Dan akhirnya, kami dapat menambahkannya pada ujian kami:

@Test public void whenSearchForSeleniumArticles_thenReturnNotEmptyResults() { // ... load //baeldung.com WebElement searchButton = driver.findElement(By.className("nav--menu_item_anchor")); clickElement(searchButton); WebElement searchInput = driver.findElement(By.id("search")); searchInput.sendKeys("Selenium"); WebElement seeSearchResultsButton = driver.findElement(By.cssSelector(".btn-search")); clickElement(seeSearchResultsButton); }

6. Elemen Tidak Boleh Diklik

Salah satu masalah yang paling biasa berlaku semasa mengklik elemen menggunakan JavaScript adalah melaksanakan skrip klik sebelum elemen tersebut dapat diklik. Dalam keadaan ini, tindakan klik tidak akan berlaku tetapi kod akan terus dilaksanakan.

Untuk mengatasi masalah ini, kita harus menahan pelaksanaan sehingga klik tersedia. Kita boleh menggunakan WebDriverWait # hingga menunggu sehingga butang diberikan.

Pertama, objek W ebDriverWait memerlukan dua parameter; pemandu dan masa tamat:

WebDriverWait wait = new WebDriverWait(driver, 5000); 

Kemudian, kami memanggil sehingga , dengan memberikan syarat elemenToBeClickable yang diharapkan :

wait.until(ExpectedConditions.elementToBeClickable(By.className("nav--menu_item_anchor"))); 

Dan setelah berjaya kembali, kami tahu kami dapat meneruskannya:

WebElement searchButton = driver.findElement(By.className("nav--menu_item_anchor")); clickElement(searchButton);

Untuk kaedah keadaan yang lebih banyak, rujuk dokumentasi rasmi.

7. Kesimpulannya

Dalam tutorial ini, kami telah belajar cara mengklik elemen di Selenium menggunakan JavaScript. Seperti biasa, sumber untuk artikel tersebut terdapat di GitHub.