Extract logs to file from driver session in Selenium

Tại sao nên xem logs từ driver session?

Chúng ta cũng nên xem logs từ driver session để hiểu thêm về tiến trình chạy của một phiên làm việc driver khi được bật lên để điều khiển một loại trình duyệt vào đó, Chrome chẳng hạn, nó giúp cho chúng ta lấy tất cả logs từ DevTools của trình duyệt đó phản hồi lại từng bước một ở tầng backend của Browser ấy.

Cụ thể là DevTools phản hồi các sự kiện xử lý của Javascript nó chạy khi chúng ta thao tác trên trình duyệt bằng driver của Selenium. Mình biết được là từng bước xử lý có xảy ra vấn đề gì về đường truyền không, hay data truyền và nhận có ok không. Tốc độ mạng load trang có vấn đề gì không, các bước con xử lý như Click hay sendKeys vào một element có bị gì không sau đó browser phản hồi lại với trạng thái như thế nào,...Từ đó chúng ta phân tích được sâu hơn vấn đề về lỗi có thể xảy ra trên cả tầng UI và Backend trong browser.

Cách lấy toàn bộ logs từ DevTools của Browser

Về việc lấy logs từ phiên làm việc driver trong Selenium nó hỗ trợ sẵn để làm việc với DevTools, cụ thể chỉ cần 2 dòng code là xong 😄

Tại đây mình chỉ trong Java nhé. Cụ thể hơn là mình thao tác trên Chrome browser để demo, các bạn thêm 2 dòng code như bên dưới:

System.setProperty("webdriver.chrome.logfile", "chromedriverlogs.log");
System.setProperty("webdriver.chrome.verboseLogging", "true");

Đặt 2 dòng code này trên chổ khởi tạo driver = new ChromeDriver(), các trình duyệt khác tương tự nhé.

@BeforeMethod
public void createDriver() {

  // System.setProperty("webdriver.edge.logfile", "edgedriverlogs.log");
  // System.setProperty("webdriver.edge.verboseLogging", "true");
  // System.setProperty("webdriver.firefox.logfile", "firefoxdriverlogs.log");
  // System.setProperty("webdriver.firefox.verboseLogging", "true");

  System.setProperty("webdriver.chrome.logfile", "chromedriverlogs.log");
  System.setProperty("webdriver.chrome.verboseLogging", "true");

  driver = new ChromeDriver();

}

Code mẫu cho Selenium Java:

package com.anhtester;

import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;
import org.testng.annotations.AfterMethod;
import org.testng.annotations.BeforeMethod;
import org.testng.annotations.Test;

import java.time.Duration;

public class GetChromeDriverLogs {

    private WebDriver driver;

    @BeforeMethod
    public void createDriver() {
        System.setProperty("webdriver.http.factory", "jdk-http-client");

        //  System.setProperty("webdriver.edge.logfile", "edgedriverlogs.log");
        //  System.setProperty("webdriver.edge.verboseLogging", "true");
        //  System.setProperty("webdriver.firefox.logfile", "firefoxdriverlogs.log");
        //  System.setProperty("webdriver.firefox.verboseLogging", "true");

        System.setProperty("webdriver.chrome.logfile", "chromedriverlogs.log");
        System.setProperty("webdriver.chrome.verboseLogging", "true");

        driver = new ChromeDriver();
        driver.manage().window().maximize();
        driver.manage().timeouts().pageLoadTimeout(Duration.ofSeconds(20));
        driver.manage().timeouts().implicitlyWait(Duration.ofSeconds(10));
        new WebUI(driver);
    }

    @Test(priority = 1)
    public void testGetChromeDriverLogs() {
        driver.get("https://crm.anhtester.com/admin/authentication");
        driver.findElement(By.xpath("//input[@id='email']")).sendKeys("admin@example.com");
        driver.findElement(By.xpath("//input[@id='password']")).sendKeys("123456");
        driver.findElement(By.xpath("//button[normalize-space()='Login']")).click();
        driver.findElement(By.xpath("//span[normalize-space()='Projects']")).click();
    }

    @AfterMethod
    public void closeDriver() {
        driver.quit();
    }
}

Source code: https://github.com/anhtester/NewFeatureSelenium4/blob/main/src/test/java/com/anhtester/GetChromeDriverLogs.java

Rồi bây giờ các bạn chạy thử đi, nó xuất ra cái file log có tên như mình đã đặt "chromedriverlogs.log". Chổ này các bạn có thể đỉnh định đường dẫn cụ thể luôn nhé, không thì mặc định file mằm ngoài cùng trong thư mục sources.



Như đoạn code trên thì mình bật Maximize window, set timeout, navigate to url,...Và đây là logs nhận được chi tiết tầng Backend của Browser xử lý nè




Quá rõ ràng rồi, và nó sẽ logs hết các events và thao tác của code mình chạy luôn á, các bạn tự xem thêm nhen. Bái bai 👋