Playwright là gì?

Playwright là gì? - Part 1

Playwright là gì?

Playwright is a framework for Web Testing and Automation. It allows testing Chromium, Firefox and WebKit with a single API. Playwright is built to enable cross-browser web automation that is ever-green, capable, reliable and fast.

Playwright là một framework dành cho kiểm thử và tự động hóa web. Nó cho phép kiểm thử các trình duyệt Chromium, Firefox, và WebKit chỉ với một API duy nhất. Playwright được phát triển nhằm hỗ trợ tự động hóa web đa trình duyệt với tính năng luôn được cập nhật, mạnh mẽ, đáng tin cậy, và nhanh chóng.

Homepage: https://playwright.dev/

Github: https://github.com/microsoft/playwright

Cài đặt

Cài đặt Visual Studio Community: https://visualstudio.microsoft.com/downloads/

Cài đặt Powershell: https://learn.microsoft.com/en-us/powershell/scripting/install/installing-powershell-on-windows

Mở Visual Studio, chọn File => New => New Project: chọn NUnit Playwright Test Project

Project sẽ được tạo với file UnitTest1.cs như sau:

[Parallelizable(ParallelScope.Self)]
[TestFixture]
public class Tests : PageTest
{
	[Test]
	public async Task HomepageHasPlaywrightInTitleAndGetStartedLinkLinkingtoTheIntroPage()
	{
		await Page.GotoAsync("https://playwright.dev");

		// Expect a title "to contain" a substring.
		await Expect(Page).ToHaveTitleAsync(new Regex("Playwright"));

		// create a locator
		var getStarted = Page.Locator("text=Get Started");

		// Expect an attribute "to be strictly equal" to the value.
		await Expect(getStarted).ToHaveAttributeAsync("href", "/docs/intro");

		// Click the get started link.
		await getStarted.ClickAsync();

		// Expects the URL to contain intro.
		await Expect(Page).ToHaveURLAsync(new Regex(".*intro"));
	}
}

Câu lệnh dưới đây là cài đặt trình duyệt cho .net 8.0. Trường hợp bạn xài .net 9.0 thì thay đổi lại nha

pwsh bin/Debug/net8.0/playwright.ps1 install

Test web app

Mặc định Playwrights sẽ run website bạn ở chế độ headless mode (nghĩa là browser sẽ không hiển thị). Để dễ dàng cho việc debug and theo dõi những gì xảy ra trên trình duyệt, bạn cần tắt headless mode. Ngoài ra, Playwrights cung cấp cho bạn option SlowMo để làm chậm quá trình test

Tạo file .runsettings

<?xml version="1.0" encoding="utf-8"?>
<RunSettings>
  <Playwright>
    <BrowserName>chromium</BrowserName>
    <LaunchOptions>
      <Headless>false</Headless>
      <Channel>msedge</Channel>
      <SlowMo>500</SlowMo>
    </LaunchOptions>
  </Playwright>
</RunSettings>

Có 3 cách để sử dụng file .runsettings:

Trong Visual Studio, bấm chọn menu Test -> Configure Run Settings -> Auto Detect runsettings file
Visual Studio -> menu Test -> Configure Run Settings -> Select Solution Wide runsettings file
Nhấp file file .runsettings, chọn Build Action -> Copy always. Mở file csproj, thêm path .runsettings file.

Ví dụ:

<Project Sdk="Microsoft.NET.Sdk">
  <PropertyGroup>
    <RunSettingsFilePath>$(MSBuildProjectDirectory)\.runsettings</RunSettingsFilePath>
  </PropertyGroup>
  ...
</Project>

Cấu hình .runsettings cho các trình duyệt khác nhau

Để chạy test với các trình duyệt khác như chromium (chrome, msedge), Firefox hoặc WebKit, bạn chỉ cần thay đổi giá trị của thẻ <BrowserName>.

<BrowserName>firefox</BrowserName>

Với chromium, bạn có option tùy chọn channel: chrome, msedge, chrome-beta, msedge-beta hoặc msedge-dev

Viết 1 test case đầu tiên

Test case này sẽ truy cập trang web, lấy dữ liệu sản phẩm (name và price) và sau đó in ra console.

[Test]
public async Task GetProduct()
{
    await Page.GotoAsync("https://scrapingclub.com/exercise/list_infinite_scroll/");

    // where to store the scraped data
    var products = new List<Product>();

    // select all product HTML elements on the page
    var productHTMLElements = Page.Locator("css=.post");

    // iterate over the product elements
    // and apply the scraping logic
    for (var index = 0; index < await productHTMLElements.CountAsync(); index++)
    {
        // get the current product HTML element
        var productHTMLElement = productHTMLElements.Nth(index);

        // retrieve the name and price
        var name = (await productHTMLElement.Locator("h4").TextContentAsync())?.Trim();
        var price = (await productHTMLElement.Locator("h5").TextContentAsync())?.Trim();

        // create a new Product instance and
        // add it to the list
        var product = new Product { Name = name, Price = price };
        products.Add(product);
    }

    // print the scraped data
    foreach (var product in products)
    {
        Console.WriteLine($"Name: {product.Name}, Price: {product.Price}");
    };

}

Định nghĩa một lớp Product để lưu trữ dữ liệu của sản phẩm.

public class Product
{
    public string Name { get; set; }
    public string Price { get; set; }
}

Trong test GetProduct(), trang web "https://scrapingclub.com/exercise/list_infinite_scroll/" được mở để scraping dữ liệu.

Page.Locator(".post"): Lấy tất cả các phần tử sản phẩm trên trang web bằng cách sử dụng CSS selector .post.
TextContentAsync(): Lấy nội dung văn bản từ các thẻ HTML của từng sản phẩm
Lưu vào Product: Tạo đối tượng Product và thêm vào danh sách products.

In ra console: In danh sách sản phẩm đã scraping ra màn hình.

Kết quả

Starting test execution, please wait...
A total of 1 test files matched the specified pattern.
Name: Short Dress, Price: $24.99
Name: Patterned Slacks, Price: $29.99
Name: Short Chiffon Dress, Price: $49.99
Name: Off-the-shoulder Dress, Price: $59.99
Name: V-neck Top, Price: $24.99
Name: Short Chiffon Dress, Price: $49.99
Name: V-neck Top, Price: $24.99
Name: V-neck Top, Price: $24.99
Name: Short Lace Dress, Price: $59.99
Name: Fitted Dress, Price: $34.99

Allure

Allure Framework là một công cụ báo cáo kiểm thử đa nền tảng, không chỉ cung cấp cái nhìn tổng quan ngắn gọn về những gì đã được kiểm thử trong báo cáo mà còn giúp các bên liên quan trong quá trình phát triển phần mềm khai thác tối đa thông tin từ kết quả kiểm thử.

Từ góc độ của Dev/QA, Allure đóng vai trò như một báo cáo toàn diện về chu kỳ sống của lỗi: từ các test case thất bại, các bug, cho đến việc ghi lại logs, các bước thực hiện, thời gian, lịch sử, tệp đính kèm, và tích hợp với các hệ thống quản lý kiểm thử (TMS) và theo dõi lỗi. Nhờ đó, các developer và tester sẽ có trong tay mọi thông tin chi tiết cần thiết để xử lý vấn đề một cách hiệu quả.

Từ góc độ của Manager, Allure mang lại cái nhìn tổng thể về tiến độ của dự án: tính năng nào đã được kiểm thử, thời gian thực hiện kiểm thử, và các thống kê quan trọng khác, giúp quản lý dự án dễ dàng hơn. Dưới đây là một ví dụ về cách tích hợp Allure framework vào dự án tự động hóa kiểm thử trong .NET với Playwright và NUnit.

Tải và cài đặt Allure Commandline trên Windows

Bạn vào trang Install Allure Report for Windows để download file allure-*.zip hoặc allure-*.tgz

Giải nén vào thư mục trên máy tính, ví dụ C:\allure\bin

Cấu hình Allure trong PATH

Mở Control Panel → System and Security → System → Advanced system settings.

Nhấp vào nút Environment Variables.

Trong phần System variables, tìm và chọn biến Path, sau đó nhấp vào Edit.

Nhấp vào New và thêm đường dẫn tới thư mục bin của Allure (ví dụ: C:\allure\bin).

Nhấn OK để lưu thay đổi.

Sau đó bạn mở terminal, kiểm tra

allure --version

Sử dụng Allure Commandline

Sau khi cài đặt thành công Allure Commandline trên bất kỳ hệ điều hành nào, bạn có thể sử dụng Allure để tạo báo cáo từ kết quả test của mình

Ví dụ:

Chạy test của bạn và lưu kết quả trong thư mục allure-results. Chạy lệnh sau để tạo và xem báo cáo Allure:

allure serve allure-results

Setup Allure với Playwright trong .NET

Cài đặt

Install-Package Allure.Commons
Install-Package Allure.NUnit

Tạo file allureConfig.json trong thư mục gốc của project với nội dung sau:

{
  "allure": {
    "directory": "..\\..\\..\\allure-results",
    "title": "Playwright Example"
  }
}

Lưu ý:

- Nhấp phải vào file allureConfig.json, chọn Properties -> Copy to Out Directory -> Always

- Sau khi thực hiện chạy Test case, kết quả sẽ được lưu vào thư mục gốc của project, thay vì thư mục bin/debug Update lại source code, thêm các attribute: AllureNUnit, AllureSuite, AllureFeature

[Parallelizable(ParallelScope.Self)]
[TestFixture]
[AllureNUnit]
[AllureSuite("Product Scraping")]
[AllureFeature("Scrape Product Data")]
public class Tests : PageTest
{
    [Test]
    [AllureDescription("Test Home page")]
    [AllureSeverity(SeverityLevel.minor)]
    public async Task HomepageHasPlaywrightInTitleAndGetStartedLinkLinkingtoTheIntroPage()
    {
        await Page.GotoAsync("https://playwright.dev");

        // Expect a title "to contain" a substring.
        await Expect(Page).ToHaveTitleAsync(new Regex("Playwright"));

        // create a locator
        var getStarted = Page.Locator("text=Get Started");

        // Expect an attribute "to be strictly equal" to the value.
        await Expect(getStarted).ToHaveAttributeAsync("href", "/docs/intro");

        // Click the get started link.
        await getStarted.ClickAsync();

        // Expects the URL to contain intro.
        await Expect(Page).ToHaveURLAsync(new Regex(".*intro"));
    }

    [Test]
    [AllureDescription("Scrape product data from a website using Playwright")]
    [AllureSeverity(SeverityLevel.normal)]
    public async Task GetProduct()
    {
        await Page.GotoAsync("https://scrapingclub.com/exercise/list_infinite_scroll/");

        // where to store the scraped data
        var products = new List<Product>();

        // select all product HTML elements on the page
        var productHTMLElements = Page.Locator("css=.post");

        // iterate over the product elements
        // and apply the scraping logic
        for (var index = 0; index < await productHTMLElements.CountAsync(); index++)
        {
            // get the current product HTML element
            var productHTMLElement = productHTMLElements.Nth(index);

            // retrieve the name and price
            var name = (await productHTMLElement.Locator("h4").TextContentAsync())?.Trim();
            var price = (await productHTMLElement.Locator("h5").TextContentAsync())?.Trim();

            // create a new Product instance and
            // add it to the list
            var product = new Product { Name = name, Price = price };
            products.Add(product);
        }

        // print the scraped data
        foreach (var product in products)
        {
            Console.WriteLine($"Name: {product.Name}, Price: {product.Price}");
        };

    }
}

Run Playwright test

dotnet test

Sau đó bạn thực hiện lệnh allure serve để xem kết quả:

allure serve allure-results\

Tham khảo

https://www.zenrows.com/blog/playwright-c-sharp#install-playwrigh

How to test web applications with Playwright and C# .NET | Twilio

Configure unit tests by using a .runsettings file

Mobile Automation with Appium, TestNG and Allure Report

Installing and Implementing Allure Reports with Selenium and C#

ASP.NET MVC: Cơ bản về Validation

Validation (chứng thực) là một tính năng quan trọng trong ASP.NET MVC và được phát triển trong một thời gian dài. Validation vắng mặt trong phiên bản đầu tiên của asp.net mvc và thật khó để tích hợp 1 framework validation của một bên thứ 3 vì không có khả năng mở rộng. ASP.NET MVC2 đã hỗ trợ framework validation do Microsoft phát triển, tên là Data Annotations. Và trong phiên bản 3, framework validation đã hỗ trợ tốt hơn việc xác thực phía máy khách, và đây là một xu hướng của việc phát triển ứng dụng web ngày nay.

Nhật ký học tập

Tìm kiếm Blog này