<body>
<div class="row">
<div id="flash-messages" class="large-12 columns">
</div>
</div>
<div class="row">
<div id="content" class="large-12 columns">
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
</style>
<h1 class="heading">Welcome to VTA Courses - Demo Selenium</h1>
<h2>Available Examples</h2>
<ul>
<li><a href='abtest.html'>A/B Testing</a></li>
<li><a href='add_remove_elements.html'>Add/Remove Elements</a></li>
<li><a href='basic_auth.html'>Basic Auth</a> (user and pass: admin)</li>
<li><a href='broken_images.html'>Broken Images</a></li>
<li><a href='challenging_dom.html'>Challenging DOM</a></li>
<li><a href='checkboxes.html'>Checkboxes</a></li>
<li><a href='context_menu.html'>Context Menu</a></li>
<li><a href='digest_auth.html'>Digest Authentication</a> (user and pass: admin)</li>
<li><a href='disappearing_elements.html'>Disappearing Elements</a></li>
<li><a href='drag_and_drop.html'>Drag and Drop</a></li>
<li><a href='dropdown.html'>Dropdown</a></li>
<li><a href='dynamic_content.html'>Dynamic Content</a></li>
<li><a href='dynamic_controls.html'>Dynamic Controls</a></li>
<li><a href='dynamic_loading.html'>Dynamic Loading</a></li>
<li><a href='entry_ad.html'>Entry Ad</a></li>
<li><a href='exit_intent.html'>Exit Intent</a></li>
<li><a href='download.html'>File Download</a></li>
<li><a href='upload.html'>File Upload</a></li>
<li><a href='floating_menu.html'>Floating Menu</a></li>
<li><a href='forgot_password.html'>Forgot Password</a></li>
<li><a href='login.html'>Form Authentication</a></li>
<li><a href='frames.html'>Frames</a></li>
<li><a href='geolocation.html'>Geolocation</a></li>
<li><a href='horizontal_slider.html'>Horizontal Slider</a></li>
<li><a href='hovers.html'>Hovers</a></li>
<li><a href='infinite_scroll.html'>Infinite Scroll</a></li>
<li><a href='inputs.html'>Inputs</a></li>
<li><a href='jqueryui/menu.html'>JQuery UI Menus</a></li>
<li><a href='javascript_alerts.html'>JavaScript Alerts</a></li>
<li><a href='javascript_error.html'>JavaScript onload event error</a></li>
<li><a href='key_presses.html'>Key Presses</a></li>
<li><a href='large.html'>Large & Deep DOM</a></li>
<li><a href='windows.html'>Multiple Windows</a></li>
<li><a href='nested_frames.html'>Nested Frames</a></li>
<li><a href='notification_message_rendered.html'>Notification Messages</a></li>
<li><a href='redirector.html'>Redirect Link</a></li>
<li><a href='download_secure.html'>Secure File Download</a></li>
<li><a href='shadowdom.html'>Shadow DOM</a></li>
<li><a href='shifting_content.html'>Shifting Content</a></li>
<li><a href='slow.html'>Slow Resources</a></li>
<li><a href='tables.html'>Sortable Data Tables</a></li>
<li><a href='status_codes.html'>Status Codes</a></li>
<li><a href='typos.html'>Typos</a></li>
<li><a href='tinymce.html'>WYSIWYG Editor</a></li>
</ul>
</div>
</div>
<div id='page-footer' class="row">
<div class="large-4 large-centered columns">
<hr>
<div style="text-align: center;">Powered by <a target="_blank" href="https://elementalselenium.com/">Elemental Selenium</a></div>
<br><br>
</div>
</div>
<li><a href='abtest.html'>A/B Testing</a></li
Code của mình dùng sẽ là
driver.findElement(By.linkText("A/B testing")).click();
Trong đó findElement là hàm để tìm Elements, nó kết hợp với method click() để click vào một element nào đó, nếu chúng ta không click thì có thể store nó vào một biến, để dùng sau này, biến này có dạng là WebElement. Khi sử dụng code kiểu đó thì nó sẽ như vầy
WebElement ABTesting = driver.findElement(By.linkText("A/B testing"));
ABTesting.click();
// Muốn dùng được WebElement và By thì phải import, cách import thì Control Shift O giống mình nói ở bài mở đầu
Đó là cách dùng LinkText, cần nhớ là LinkText phân biệt chữ hoa chứ thường nha
Tiếp đến là các loại Selector khác như : ID, Name, Class Name, Tag Name, Xpath, CSS, trong đó ngoại trừ Xpath, tất cả các Selector còn lại đều dính tới CSS, nếu bạn đã từng code CSS sẽ biết được CSS Selector dùng để select element trong DOM như là #id, .class ....
Bây giờ có đoạn code, các bạn hãy save lại rồi lưu thành TestPage.html để demo nào
<html>
<head>
<title> Learning Selenium Selector </title>
</head>
<body>
<div id="selectAllPage">
<button id='firstButton' class ='onlyMe' type="button" name="testButton" value="ButonOne">ButonOne</button>
<button id='secondButton' type="button" name="testButton2" value="ButonTwo">ButonTwo</button>
<button id='thirdButton' type="button" name="testButton3" value="ButtonThree">ButtonThree</button>
<form id="login">
<input placeholder="Username" name="username" type="text" />
<input placeholder="Password" name="password" type="password"/>
<input name="submit" type="submit" value="Continue!"/>
</form>
</div>
</body>
</html>
Sau đó các bạn paste đoạn code này vào và cho nó chạy để demo kết quả
WebDriver driver = new ChromeDriver();
driver.get("đường dẫn tới file TestPage.html");
//Tìm theo className
driver.findElement(By.className("onlyMe")).click();
System.out.println("Ấn vào nút đầu tiên thành công");
//Tìm theo name
driver.findElement(By.name("testButton2")).click();
System.out.println("Ấn vào nút thứ 2 thành công");
//Tìm theo id
driver.findElement(By.id("thirdButton")).click();
System.out.println("Ấn vào nút thứ 3 thành công");
//Tìm theo Xpath
driver.findElement(By.xpath("//input[@name='username']")).sendKeys("myUsername");
System.out.println("Nhập username thành công");
//Tìm theo CSS
driver.findElement(By.cssSelector("[name|='password']")).sendKeys("myPassword");
System.out.println("Nhập password thành công");
Thread.sleep(3000);
// Quit Browser
driver.quit();
Phân tích đoạn code trên:
driver.findElement(By.className("onlyMe"));
Đây là đang lấy Locator theo class trong CSS. Trong 1 file html, thì class name có thể trùng nhau, do đó nếu có nhiều node (elements) được tìm thấy, Selenium sẽ lây cái đầu tiên từ trên xuống trong DOM, cách này ít dùng vì sẽ có rất nhiều class trùng nhau => không chính xác
driver.findElement(By.name("testButton2"));
Tương tự như className, name lấy được Element chứa name tương ứng, ví dụ
<input placeholder="Username" name="username" type="text">
Sẽ có name là "username"
Tiếp theo là Xpath:
driver.findElement(By.xpath("//input[@name='username']"));
Đây là một trong số 2 Locator mạnh thường được dùng, vì nó có thể kết hợp nhiều điều kiện, khi tìm thấy nhiều Elements để cho ra một Element duy nhất, kết quả sẽ chính xác. Mình sẽ có 1 bài viết về nó sau bài này
Tiếp theo là CSS Selector:
driver.findElement(By.cssSelector("[name|='password']"));
Nó cũng tương tự như Xpath, có thể kết hợp rất nhiều điều kiện để lấy được một kết quả duy nhất trong vô số kết quả, và syntax y hệt như CSS locator trong CSS coding, do đó nếu các bạn rành HTML và CSS thì dùng cái này rất có lợi. Mình cũng sẽ có 1 bài viết nhỏ nói về Locator này vì nó cũng phổ biến.
Vậy là mình đã giới thiệu xong cho các bạn về các loại Locator trong Selenium, wohoooo
Hẹn gặp lại ở các bài viết sau
Koha