Cara Memverifikasi Tooltip di Selenium webdriver
Krishna rungta
Keterangan alat masuk Selenium
A Keterangan alat masuk Selenium adalah teks yang muncul ketika mouse mengarahkan kursor ke suatu objek di halaman web. Objeknya bisa berupa link, gambar, tombol, area teks, dll. Teks tooltip sering kali memberikan lebih banyak informasi tentang objek yang dituju pengguna di atas kursor mouse.
Tooltip secara tradisional diimplementasikan sebagai atribut 'judul' pada suatu elemen. Nilai atribut ini ditampilkan sebagai tooltip saat mouse-hover. Ini adalah teks statis yang memberikan informasi elemen tanpa gaya.
Sekarang, ada banyak plugin yang tersedia untuk implementasi 'tool tips'. Tooltip tingkat lanjut dengan gaya, rendering, gambar, dan tautan sedang diimplementasikan menggunakan JavaPlugin Script/JQuery atau menggunakan CSS Tooltips.
- Untuk mengakses atau memverifikasi tooltip statis yang diimplementasikan menggunakan atribut HTML “title”, kita cukup menggunakan metode getAttribute(“title”) dari WebElement. Nilai yang dikembalikan metode ini (yang merupakan teks tooltip) dibandingkan dengan nilai yang diharapkan untuk verifikasi.
- Untuk bentuk implementasi tooltip lainnya, kita harus menggunakan “API Interaksi Pengguna Tingkat Lanjut” yang disediakan oleh Driver Web untuk membuat efek hover mouse dan kemudian mengambil tooltip untuk elemen tersebut.
Sekilas tentang API Interaksi Pengguna Tingkat Lanjut
API Interaksi Pengguna Tingkat Lanjut menyediakan API untuk tindakan pengguna seperti drag and drop, hovering, multi-selection, penekanan dan pelepasan tombol, serta tindakan lainnya menggunakan keyboard atau mouse di halaman web.
Anda bisa merujuk ini link untuk rincian lebih lanjut tentang API.
Di sini, mari kita lihat cara menggunakan beberapa kelas dan metode yang kita perlukan untuk memindahkan elemen penggeser dengan offset.
Langkah 1) Untuk menggunakan API, paket/kelas berikut perlu diimpor:
Langkah 2) Buat objek kelas "Tindakan" dan buat Urutan tindakan pengguna. Kelas tindakan digunakan untuk membangun urutan tindakan pengguna seperti moveToElement(), dragAndDrop() dll. Berbagai metode yang terkait dengan tindakan pengguna disediakan oleh API.
Objek driver disediakan sebagai parameter untuk konstruktornya.
Langkah 3) Buat Objek Tindakan menggunakan metode build() dari kelas “Actions”. Panggil metode perform() untuk mengeksekusi semua tindakan yang dibuat oleh objek Actions (pembuat di sini).
Kita telah melihat cara menggunakan beberapa metode Tindakan pengguna yang disediakan oleh API – clickAndHold(elemen), moveByOffset(10,0), rilis(). API menyediakan banyak metode seperti itu.
Mengacu kepada link lebih lanjut.
Cara Memverifikasi (Menangani) Tooltip di Selenium
Mari kita lihat demonstrasi mengakses dan memverifikasi tip alat dalam skenario sederhana
- Skenario 1: Tooltip diimplementasikan menggunakan atribut “title”.
- Skenario 2: Tooltip diimplementasikan menggunakan plugin jQuery.
Skenario 1: Atribut 'judul' HTML
Untuk kasus ini, mari kita ambil contoh situs – https://demo.guru99.com/test/social-icon.html.
Kami akan mencoba memverifikasi tooltip ikon “github” di kanan atas halaman.
Untuk melakukannya, pertama-tama kita akan menemukan elemen tersebut dan mendapatkan atribut 'judul' dan memverifikasi dengan teks tip alat yang diharapkan.
Karena, kami mengasumsikan tip alat ada dalam atribut “title”, kami bahkan tidak mengotomatiskan efek hover mouse tetapi hanya mengambil nilai atribut menggunakan metode “getAttribute()”.
Ini kodenya
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.*;
public class ToolTip {
public static void main(String[] args) {
String baseUrl = "https://demo.guru99.com/test/social-icon.html";
System.setProperty("webdriver.chrome.driver","G:\\chromedriver.exe");
WebDriver driver = new ChromeDriver();
driver.get(baseUrl);
String expectedTooltip = "Github";
// Find the Github icon at the top right of the header
WebElement github = driver.findElement(By.xpath(".//*[@class='soc-ico show-round']/a[4]"));
//get the value of the "title" attribute of the github icon
String actualTooltip = github.getAttribute("title");
//Assert the tooltip's value is as expected
System.out.println("Actual Title of Tool Tip"+actualTooltip);
if(actualTooltip.equals(expectedTooltip)) {
System.out.println("Test Case Passed");
}
driver.close();
}
}
Penjelasan kode
- Temukan WebElement yang mewakili ikon “github”.
- Dapatkan atribut “title” menggunakan metode getAttribute().
- Tegaskan nilai terhadap nilai tooltip yang diharapkan.
Skenario 2: Plugin JQuery
Ada banyak plugin JQuery yang tersedia untuk mengimplementasikan tooltips, dan masing-masing plugin memiliki bentuk implementasi yang sedikit berbeda.
Beberapa plugin mengharapkan HTML tooltip selalu ada di samping elemen yang menerapkan tooltip tersebut, sedangkan plugin lainnya membuat tag “div” dinamis, yang muncul dengan cepat saat mengarahkan kursor ke elemen.
Untuk demonstrasi kita, mari kita pertimbangkan cara penerapan tooltip “jQuery Tools Tooltip”.
Di sini, di URL – https://demo.guru99.com/test/tooltip.html Anda dapat melihat demonya dengan mengarahkan mouse ke "Unduh sekarang", kita mendapatkan tooltip tingkat lanjut dengan gambar, latar belakang info, tabel, dan tautan di dalamnya yang dapat diklik.
Jika Anda melihat sumber di bawah, Anda dapat melihat bahwa tag div yang mewakili tooltip selalu ada di sebelah tag tautan “Unduh sekarang”. Namun, kode di dalam tag skrip di bawah mengontrol kapan perlu muncul.
Mari kita coba verifikasi teks tautan pada tooltip untuk demonstrasi kita di sini.
Pertama-tama kita akan menemukan WebElement yang sesuai dengan "Unduh sekarang". Kemudian menggunakan Interactions API, kita akan berpindah ke elemen (mouse-hover). Selanjutnya, kita akan menemukan WebElement yang sesuai dengan tautan di dalam tooltip yang ditampilkan dan memverifikasinya dengan teks yang diharapkan.
Ini kodenya
import org.openqa.selenium.interactions.Action;
import org.openqa.selenium.interactions.Actions;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.*;
public class JqueryToolTip {
public static void main(String[] args) {
String baseUrl = "https://demo.guru99.com/test/tooltip.html";
System.setProperty("webdriver.chrome.driver","G:\\chromedriver.exe");
WebDriver driver = new ChromeDriver();
String expectedTooltip = "What's new in 3.2";
driver.get(baseUrl);
WebElement download = driver.findElement(By.xpath(".//*[@id='download_now']"));
Actions builder = new Actions (driver);
builder.clickAndHold().moveToElement(download);
builder.moveToElement(download).build().perform();
WebElement toolTipElement = driver.findElement(By.xpath(".//*[@class='box']/div/a"));
String actualTooltip = toolTipElement.getText();
System.out.println("Actual Title of Tool Tip "+actualTooltip);
if(actualTooltip.equals(expectedTooltip)) {
System.out.println("Test Case Passed");
}
driver.close();
}
}
Penjelasan Kode
- Temukan WebElement yang sesuai dengan elemen "unduh sekarang" yang akan kita arahkan mouse.
- Menggunakan API Interaksi, arahkan mouse ke "Unduh sekarang".
- Dengan asumsi tooltip ditampilkan, temukan WebElement yang sesuai dengan link di dalam tooltip yaitu tag “a”.
- Verifikasikan teks tooltip tautan yang diambil menggunakan getText() terhadap nilai yang diharapkan yang telah kita simpan di “expectedToolTip”
Kesimpulan
Dalam tutorial ini, Anda telah mempelajari cara mengakses Tooltips menggunakan Selenium pengemudi web.
Tip Alat diterapkan dengan cara yang berbeda–
- Implementasi dasarnya didasarkan pada atribut “judul” HTML. getAttribute(title) mendapatkan nilai tooltip.
- Implementasi tip alat lainnya seperti JQuery, tooltip CSS memerlukan API Interaksi untuk membuat efek hover mouse
API Interaksi Pengguna Tingkat Lanjut–
- moveToElement(element) dari kelas Actions digunakan untuk mengarahkan mouse ke suatu elemen.
- Metode Build() kelas Actions membangun urutan tindakan pengguna menjadi objek Action.
- Perform() dari kelas Action mengeksekusi semua urutan tindakan pengguna sekaligus.
Untuk memverifikasi tooltip, pertama-tama kita harus mengarahkan mouse ke elemen tersebut, kemudian menemukan elemen yang sesuai dengan tool tip dan mendapatkan teksnya atau nilai lain untuk memverifikasi terhadap nilai yang diharapkan.
