Giới thiệu

Trong bài viết này, tiếp nối bài viết trước chúng ta sẽ tìm hiểu về cách thực thi Javascript trong Selenium và thực hành số thao tác cơ bản để thực thi một đoạn mã Javascript.

Mục tiêu

• Thiết lập dự án Selenium C# thông qua Visual Stdio 2020 (hoặc tương đương)
• Thực hành một số thao tác về các Element trong Selenium

Chuẩn bị

• Máy tính cài đặt sẵn Visual Stdio 2020 (hoặc tương đương)
• Kiến thức về lập trình C# và WinForm cơ bản

Nội dung

1. Tạo dự án với Selenium C# (Xem lại bài viết đầu tiên)

2. Thao tác thực thi Javascript trong Selenium

- Để tác động lên Website chúng ta có thể tiếp cận một cách khác bằng lệnh Javascript 

- Như bài viết trước chúng ta đã thao tác tìm ra Element thông qua Id, ClassName, Name hoặc Tag. Vậy thì có một cách khác để lấy Element và tìm ra nhiều thông tin khi thực thi Script trong Javascript.

- Đoạn mã ví dụ cần thực thi lấy ra Href của một ClassName trong trang https://vnexpress.net/:

// Lấy phần tử h3 có class "title-news"
const h3Element = document.querySelector('h3.title-news');

// Lấy phần tử a bên trong phần tử h3
const anchorElement = h3Element.querySelector('a');

// Lấy giá trị của thuộc tính href
const hrefValue = anchorElement.getAttribute('href');
alert(hrefValue)

- Code C# chúng ta sẽ thực thi như sau:

private void button1_Click(object sender, EventArgs e)
{
    // Thao tác với FireFox
    //FirefoxDriver firefoxDriver = new FirefoxDriver();

    // Thao tác với Chrome
    ChromeDriver chromeDriver = new ChromeDriver();

    // Mở trình duyệt ở chế độ toàn màn hình
    chromeDriver.Manage().Window.Maximize();

    // chuyển trang đến website howkteam.com
    chromeDriver.Url = "https://vnexpress.net/";
    chromeDriver.Navigate();

    // Đoạn mã js
    var jsScript = "const h3Element = document.querySelector('h3.title-news');" +
        "const anchorElement = h3Element.querySelector('a');" +
        "const hrefValue = anchorElement.getAttribute('href');" +
        "alert(hrefValue)";

    // Thực thi mã js
    // Note: Đoạn nào sẽ đợi đến khi nào load hẳn trang page rồi mới được thực thi
    chromeDriver.ExecuteScript(jsScript);

}

- Hoặc chúng ta có thể trả về kết quả từ đoạn mã js:

private void button1_Click(object sender, EventArgs e)
{
    // Thao tác với FireFox
    //FirefoxDriver firefoxDriver = new FirefoxDriver();

    // Thao tác với Chrome
    ChromeDriver chromeDriver = new ChromeDriver();

    // Mở trình duyệt ở chế độ toàn màn hình
    chromeDriver.Manage().Window.Maximize();

    // chuyển trang đến website howkteam.com
    chromeDriver.Url = "https://vnexpress.net/";
    chromeDriver.Navigate();

    // Đoạn mã js trả về giá trị Href
    var jsScript = "const h3Element = document.querySelector('h3.title-news');" +
        "const anchorElement = h3Element.querySelector('a');" +
        "const hrefValue = anchorElement.getAttribute('href');" +
        "return hrefValue";

    // Thực thi mã js
    // Note: Đoạn nào sẽ đợi đến khi nào load hẳn trang page rồi mới được thực thi
    var result = (string)chromeDriver.ExecuteScript(jsScript);

    // Show ra trong MessageBox Form C#
    MessageBox.Show(result);
}

- Một số phương thức javascript thường sử dụng:

• document.getElementById(id): Lấy phần tử HTML có id cụ thể.
• document.querySelector(selector): Lấy phần tử đầu tiên khớp với bộ chọn CSS.
• document.querySelectorAll(selector): Lấy tất cả các phần tử khớp với bộ chọn CSS.
• element.innerHTML: Lấy hoặc đặt nội dung HTML bên trong một phần tử.
• element.style: Thay đổi các thuộc tính CSS của phần tử.
• element.classList.add(className): Thêm lớp CSS vào phần tử.
• element.classList.remove(className): Xóa lớp CSS khỏi phần tử.
• element.classList.toggle(className): Chuyển đổi trạng thái của lớp CSS (thêm nếu chưa có, xóa nếu đã có).
• localStorage.setItem(key, value): Lưu trữ dữ liệu vào bộ nhớ cục bộ.
• localStorage.getItem(key): Lấy dữ liệu từ bộ nhớ cục bộ.
• sessionStorage.setItem(key, value): Lưu trữ dữ liệu vào bộ nhớ phiên (chỉ tồn tại trong phiên hiện tại).
• sessionStorage.getItem(key): Lấy dữ liệu từ bộ nhớ phiên.

Kết Luận

Trong bài viết này, chúng ta đã cùng nhau tìm hiểu về cách thực thi javascript và thực hiện một vài bài thực hành trong Selenium. Tới đây các bạn có thử làm một số ví dụ thực hành khác trên các Website khác để kiếm tra kết quả.