AUTOMATION BLOG
Share & Discuss about Testing Experiences
AUTOMATION BLOG

Topic 33: Kiểm tra HTML5 validation message

Chào các bạn đã đến với chủ đề tiếp theo của mình. Hôm nay, mình sẽ tiếp tục hướng dẫn các bạn cách kiểm tra validation message của HTML5 bằng cách sử dụng Javascript executor. Ở bài này, chúng ta sẽ đi qua 1 số nội dung như sau:

1. HTML5 Form

  • Một phần của trang web bạn đang test, cho phép người dùng tương tác với hệ thống, thu thập thông tin: form đăng nhập/ đăng kí/ mua hàng/ bình luận/..

2. Cách thức hoạt động

  • User mở form nhập liệu
  • Điền thông tin vào form sau đó submit dữ liệu lên máy chủ – trong step này dữ liệu được nhập vào có thể được kiểm tra tại browser của người dùng thông qua các đoạn mã Javascript
  • Server sau khi nhận được thông tin sẽ xử lý thông qua các ngôn ngữ kịch bản máy chủ và thực hiện kiểm tra dữ liệu trong form, logic, ghi dữ liệu vào DB
  • Sau khi xử lý xong thông tin sẽ gửi lại hồi đáp thành công hay không về trình duyệt và kết thúc một chu trình khép kín xử lý form nhập liệu

3. Thuộc tính ‘required’ của thẻ <input>

  • ‘required’ là thuộc tính mới trong HTML5 dành cho thẻ input. Tác dụng của required là buộc người dùng phải nhập dữ liệu thì mới gửi được (submit)
    • Nếu bạn không điền gì vào trường NAME > nhấn nút Submit> bạn sẽ nhận được thông báo kiểu như “Vui lòng điền vào trường này” = “Please fill out this field.”

  • Thuộc tính required hỗ trợ hầu hết các trình duyệt thông dụng hiện tại

  • Những thẻ input type dùng required attribute: text, checkbox, radio, email, password, search, url, telephone, date time picker, number, file

  • Required là thuộc tính kiểu boolean, nghĩa là nó chỉ nhận 2 giá trị có hoặc không có. Nếu không có requried trong thẻ input nghĩa là không yêu cầu phải nhập đủ dữ liệu, ngược lại nếu có thì phải nhập đủ mới được Submit
  • Vậy có phải chỉ cần verify thuộc tính required có xuất hiện tại field cần check là đủ hay ko?
WebElement nameTextbox = driver.findElement(By.xpath(“//input[@id=’fname’ and @required]”));
Assert.assertTrue(nameTextbox.isDisplayed);

  • Cách check trên (verify field name textbox có thuộc tính required) có thể đúng nhưng chưa đủ – nếu như field đó chỉ cần verify là field required, ko yêu cầu các message cụ thể cần hiển thị cho nhiều trường hợp. Nhưng 1 field có thể có nhiều validation message khác thì nên check cụ thể các message cho từng case:
    • Email invalid/incorrect:
      • Please enter an email address.
      • Please match the requested format.
      • …

3. Làm sao để verify HTML5 message khi Selenium ko support

  • Selenium ko tương tác được với các html5 message, nếu để ý sẽ thấy các javascript message này được browser hiển thị chứ ko hề được tìm thấy trong DOM – vì thế ko nên sử dụng Inspector/ Firebug để find các message này
  • Giải pháp là dùng chính javascript để get các message này và verify với các case cụ thể

4. Testcase sample

  • Testscript_01 – Input email with empty data:

  • Testscript_02 – Input email with invalid data:

  • Testscript_03 – Input email with incorrect data:

5. Code demo

package org.example.Topic33;

import org.openqa.selenium.By;
import org.openqa.selenium.JavascriptExecutor;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.Assert;
import org.testng.annotations.AfterClass;
import org.testng.annotations.BeforeClass;
import org.testng.annotations.Test;

import java.time.Duration;

public class VerifyHTML5Message {
    WebDriver driver;

    By resultIframe = By.xpath("//iframe[@id='result']");
    By nameTextbox = By.xpath("//input[@id='fname']");
    By passwordTextbox = By.xpath("//input[@id='pass']");
    By emailTextbox = By.xpath("//input[@id='em']");
    By submitButton = By.xpath("//input[@value='SUBMIT']");

    @BeforeClass
    public void beforeClass() {
        driver = new ChromeDriver();
        driver.get("https://codepen.io/daominhdam/full/KRKBLr");
        driver.manage().timeouts().implicitlyWait(Duration.ofSeconds(10));
        driver.manage().window().maximize();
        driver.switchTo().frame(driver.findElement(resultIframe));
    }

    @Test
    public void TC_01_Validate_Name_Empty() throws InterruptedException {
        driver.findElement(nameTextbox).sendKeys("");
        driver.findElement(submitButton).click();
        String nameMessage = getHTML5ValidationMessage(driver.findElement(nameTextbox));
        Assert.assertEquals("Please fill out this field.", nameMessage);
        Thread.sleep(3000);
    }

    @Test
    public void TC_02_Validate_Password_Empty() throws InterruptedException {
        driver.findElement(nameTextbox).sendKeys("Dam Dao");
        driver.findElement(passwordTextbox).sendKeys("");
        driver.findElement(submitButton).click();
        String passwordMessage = getHTML5ValidationMessage(driver.findElement(passwordTextbox));
        Assert.assertEquals("Please fill out this field.", passwordMessage);
        Thread.sleep(3000);
    }

    @Test
    public void TC_03_Validate_Email_Empty() throws InterruptedException {
        driver.findElement(nameTextbox).sendKeys("Dam Dao");
        driver.findElement(passwordTextbox).sendKeys("123456");
        driver.findElement(emailTextbox).sendKeys("");
        driver.findElement(submitButton).click();
        String emailMessage = getHTML5ValidationMessage(driver.findElement(emailTextbox));
        Assert.assertEquals("Please fill out this field.", emailMessage);
        Thread.sleep(3000);
    }

    public String getHTML5ValidationMessage(WebElement element) {
        JavascriptExecutor jsExecutor = (JavascriptExecutor) driver;
        return (String) jsExecutor.executeScript("return arguments[0].validationMessage;", element);
    }

    @AfterClass
    public void afterClass() {
        driver.quit();
    }
}

6. Lời kết

Như vậy chúng ta đã tìm hiểu qua cách cách kiểm tra validation message của HTML5 trong Selenium. Các bạn hãy xem lại ví dụ trên và practice nhiều lên nhé. Cảm ơn các bạn đã theo dõi bài viết của mình.  Chúc các bạn thành công. Hẹn gặp lại các bạn ở những chủ đề tiếp theo.

Nguồn:

https://vntesters.com/java-webdriver-14-kiem-tra-html5-validation-message/

Leave a Reply

Your email address will not be published. Required fields are marked *