Get best of the week

Lokasi Relatif di Selenium 4

Salute, Khabrovsk. Untuk mengantisipasi dimulainya kursus Java QA Engineer, kami telah menyiapkan terjemahan materi yang menarik untuk Anda.




Penentu Lokasi Relatif


Selenium 4 membawa kami relatif locators - Relative Locators (awalnya disebut Friendly Locators). Fungsi ini telah ditambahkan untuk membantu Anda menemukan item di sebelah item lainnya.

Pilihan yang tersedia:

  • di atas () : item pencarian di atas item yang ditentukan
  • di bawah () : item yang dicari di bawah item yang ditentukan
  • toLeftOf () : item pencarian terletak di sebelah kiri item yang ditentukan
  • toRightOf () : item pencarian terletak di sebelah kanan item yang ditentukan
  • near () : item yang Anda cari terletak tidak lebih dari 50 piksel dari item yang ditentukan. Ada juga metode kelebihan beban untuk menentukan jarak.

Semua metode ini kelebihan beban untuk menerima Oleh atau WebElement.

Menggunakan pencari relatif


Menggunakan aplikasi toko buku ini sebagai contoh , kami ingin memverifikasi bahwa buku di sebelah kiri Advanced Selenium di Jawa adalah Java For Testers. Pelacak relatif memungkinkan kita melakukan ini.


Berikut adalah fragmen DOM untuk buku-buku


"Advanced Selenium in Java" diwakili dalam DOM oleh pengenal pid6, dan "Java For Testers" oleh pid5.

Suatu metode WebDriver::findElementdapat mengambil metode withTagName()yang mengembalikan objek RelativeLocator.RelativeBy(keturunan By).

driver.findElement(withTagName("li")


Di sini saya sudah bisa menentukan lokasi relatif. Saya tahu bahwa "Java For Testers" ada di sebelah kiri "Advanced Selenium in Java" (pid6) dan di bawah "Test Automation in the Real World" (pid1). Jadi, saya bisa tunjukkan dari keduanya:

driver.findElement(withTagName("li")
                .toLeftOf(By.id("pid6"))
                .below(By.id("pid1")));

Dan saya mendapatkan Java For Testers (pid5).

@Test
public void test_book5_is_left_of_book6_and_below_book1(){
    String id = driver.findElement(withTagName("li")
            .toLeftOf(By.id("pid6"))
            .below(By.id("pid1")))
            .getAttribute("id");
 
    assertEquals(id, "pid5");
}

Kita dapat menggunakan above()dan metode toRightOf()untuk menemukan Pengalaman Otomasi Uji (pid2):

@Test
public void test_book2_is_above_book6_and_right_of_book1(){
    String id = driver.findElement(withTagName("li")
                    .above(By.id("pid6"))
                    .toRightOf(By.id("pid1")))
            .getAttribute("id");
 
    assertEquals(id, "pid2");
}

Bagaimana itu bekerja?


Saya tidak dapat menemukan "Java For Testers" hanya dengan menelepon toLeftOf (By.id ("pid6")) . Sendiri, ia akan mengembalikan Uji Otomasi di Dunia Nyata (pid1). Ini karena driver.findElement()pencarian dari akar DOM, dan item pertama di <li>sebelah kiri Advanced Selenium di Jawa adalah Uji Otomasi di Dunia Nyata.

Selenium menggunakan fungsi JavaScript getBoundingClientRect()untuk mencari elemen relatif. Fungsi ini mengembalikan properti elemen, seperti kanan, kiri, bawah, dan atas.

Melihat sifat-sifat dari ketiga buku ini, kita melihat bahwa baik Otomasi Uji di Dunia Nyata (pid1) dan Java For Testers (pid5) keduanya memiliki posisi sumbu x yang sama.



Dengan demikian, keduanya berada di sebelah kiri Java For Testers, dengan Test Automation in the Real World (pid1) menjadi yang pertama ditemukan.

Hal lain yang perlu diingat adalah perubahan pada viewports aplikasi. Jika saya menjalankan tes yang disebutkan di atas pada aplikasi saya di tampilan seluler, maka secara alami mereka akan gagal karena buku-buku tidak lagi di sebelah kiri / kanan buku lain:



Saya juga mengalami masalah dengan pencari lokasi yang ramah ketika saya mencoba menggunakan mereka di aplikasi ToDo ini .



Saya mencoba menggunakan metode ini toLeftOf()untuk menemukan saklar input di sebelah elemen "selamat tinggal dunia". Secara visual, sakelar input ini terletak di sebelah kiri label "selamat tinggal dunia". Inilah div di DOM ini:

<div class="view" data-reactid=".0.1.2.$645c3b67-884e-4e4f-aecd-8f9367e670f8.0">
    <input class="toggle" type="checkbox" data-reactid=".0.1.2.$645c3b67-884e-4e4f-aecd-8f9367e670f8.0.0">
    <label data-reactid=".0.1.2.$645c3b67-884e-4e4f-aecd-8f9367e670f8.0.1">goodbye world</label>
    <button class="destroy" data-reactid=".0.1.2.$645c3b67-884e-4e4f-aecd-8f9367e670f8.0.2"></button>
</div>

Berikut adalah kode yang saya gunakan untuk menemukan elemen input di sebelah kiri label:

driver.findElement(withTagName("input")
      .toLeftOf(By.xpath("//label[text()='goodbye world']")))
      .click();

Namun, saya menemukan pengecualian: Tampaknya meskipun yang ini di sebelah kiri yang visual, pada kenyataannya tidak. Saya memanggil fungsi untuk kedua elemen ini, dan mereka benar-benar tumpang tindih. Perhatikan bahwa keduanya memiliki posisi x 838, jadi secara teknis tidak di sebelah kiri . Dan ketika saya memilih elemen , saya sekarang melihat bahwa elemen tersebut benar-benar tumpang tindih . <img src = " habrastorage.org/webt/hj/aa/46/hjaa46ps-of5_hhlplqaldclc7s.png " /

org.openqa.selenium.NoSuchElementException: Cannot locate an element using [unknown locator]

<input><label>getBoundingClientRect()<input><label>



<label><input>


Catatan : Ini adalah versi alpha dari Selenium WebDriver. Saya berbicara dengan manajer proyek Selenium, Simon Stewart dan menemukan bahwa implementasinya dapat berubah tergantung pada umpan baliknya.

Itu saja. Sampai jumpa di lapangan !

More articles:


All Articles