Mengklik Elemen di Selenium menggunakan JavaScript

1. Perkenalan

Dalam tutorial singkat ini, kita akan melihat contoh sederhana tentang 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. Dependensi

Pertama, kami menambahkan dependensi selenium-java dan junit ke proyek kami di pom.xml :

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

3. Konfigurasi

Selanjutnya, kita perlu mengkonfigurasi WebDriver. Dalam contoh ini, kami akan menggunakan implementasi Chrome-nya:

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

Kami menggunakan metode yang dianotasi dengan @Before untuk melakukan penyiapan awal sebelum setiap pengujian. Di dalamnya kami menyetel properti webdriver.chrome.driver yang menentukan lokasi driver chrome. Setelah itu, kami membuat instance objek WebDriver .

Saat tes selesai kita harus menutup jendela browser. Kita bisa melakukannya dengan menempatkan pernyataan driver.close () dalam metode yang dianotasi dengan @After . Ini memastikan itu akan dijalankan bahkan jika pengujian gagal:

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

4. Membuka Browser

Sekarang, kita dapat membuat kasus uji yang akan melakukan langkah pertama kita - buka situs web:

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

Di sini, kami menggunakan metode driver.get () untuk memuat halaman web. Selanjutnya, kami memverifikasi judulnya untuk memastikan kami berada di tempat yang tepat.

5. Mengklik sebuah Elemen Menggunakan JavaScript

Selenium hadir dengan metode klik WebElement # praktis yang memanggil event klik pada elemen tertentu. Namun dalam beberapa kasus, tindakan klik tidak dimungkinkan.

Salah satu contohnya adalah jika kita ingin mengklik elemen yang dinonaktifkan. Dalam kasus tersebut, WebElement # click akan menampilkan IllegalStateException . Sebagai gantinya, kita dapat menggunakan dukungan JavaScript Selenium.

Untuk melakukan ini, hal pertama yang kita perlukan adalah JavascriptExecutor . Karena kami menggunakan implementasi ChromeDriver , kami cukup mentransmisikannya ke apa yang kami butuhkan:

JavascriptExecutor executor = (JavascriptExecutor) driver;

Setelah mendapatkan JavascriptExecutor , kita bisa menggunakan metode executeScript . Argumennya adalah skrip itu sendiri dan larik parameter skrip. Dalam kasus kami, kami memanggil metode klik pada argumen pertama:

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

Sekarang, mari kita gabungkan menjadi satu metode yang akan kita sebut clickElement :

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

Dan akhirnya, kami dapat menambahkan ini ke pengujian 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 yang Tidak Dapat Diklik

Salah satu masalah paling umum yang terjadi saat mengklik elemen menggunakan JavaScript adalah menjalankan skrip klik sebelum elemen tersebut dapat diklik. Dalam situasi ini, tindakan klik tidak akan terjadi tetapi kode akan terus dijalankan.

Untuk mengatasi masalah ini, kami harus menahan eksekusi hingga klik tersedia. Kita bisa menggunakan WebDriverWait # hingga menunggu hingga tombol ditampilkan.

Pertama, objek W ebDriverWait membutuhkan dua parameter; pengemudi dan waktu tunggu:

WebDriverWait wait = new WebDriverWait(driver, 5000); 

Kemudian, kita memanggil sampai , memberikan kondisi elementToBeClickable yang diharapkan :

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

Dan setelah berhasil kembali, kami tahu kami dapat melanjutkan:

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

Untuk metode kondisi yang lebih tersedia, lihat dokumentasi resmi.

7. Kesimpulan

Dalam tutorial ini, kita telah mempelajari cara mengklik elemen di Selenium menggunakan JavaScript. Seperti biasa, sumber artikel tersedia di GitHub.