Định Vị Phần Tử Trong Playwright

Định Vị Phần Tử Trong Playwright

Posted on by Test Viewpoint

Trong bài viết trước, mình đã giới thiệu cho các bạn những đặc điểm chung về Playwright và tại sao Playwright ngày càng được phổ biến trong cộng đồng kiểm thử thế giới. Từ bài viết này trở đi, mình và các bạn sẽ tiếp tục tìm hiểu chi tiết về Playwright và những ưu việt mà một framework auto hiện đại có thể làm được. Trước tiên, hãy cùng mình tìm hiểu về định vị phần tử trong Playwrigh trong bài viết hôm nay nhé!

Quy Tắc Cú Pháp Định Vị

Trong Auto Testing bằng Playwright, Locator được sử dụng để tìm và tương tác với các phần tử trên giao diện người dùng (UI). Dưới đây là các cú pháp phổ biến để xác định Locator trong Playwright:

// Định vị qua tag name
page.locator('input')

// Định vị qua id
page.locator(#inputEmail)

// Định vị qua quá trị class
page.locator(.shape-rectangle)

// Định vị bằng thuộc tính
page.locator('[placeholder="Email"]')

// Định vị bằng giá trị class (full)
page.locator('[class="input-full-width size-medium status-basic"])

// Định vị bằng cách kết hợp nhiều loại selector
page.locator('input[placeholder="Email"][nbinput]')

// Định vị bằng XPath (không khuyến khích)
page.locator('//*[@id="inputEmail1"]')

// Định vị bằng khớp một phần văn bản
page.locator(':text{"Auto Test"}')

// Định vị bằng khớp hoàn toàn văn bản
page.locator(':text-is("Auto Test by Playwright)')

User-facing Locator

User-facing Locator trong Playwright là các Locator được thiết kế để mô phỏng cách người dùng tương tác với giao diện ứng dụng. Thay vì dựa vào các chi tiết kỹ thuật như ID, class, hoặc XPath, các Locator này tập trung vào các yếu tố mà người dùng thực sự nhìn thấy và sử dụng, chẳng hạn như văn bản, nhãn, hoặc vai trò của phần tử.

// Định vị dựa trên vai trò phần tử
  page.getByRole("textbox", { name: "Email" });

// Định vị bằng nhãn
  page.getByLabel("Email")

// Định vị bằng place holder
  page.getByPlaceholder("Please enter your email")

// Định vị bằng văn bản
  page.getByText("Auto test in Playwright");

// Định vị bằng test id
  page.getByTestId("SignIn")

// Định vị bằng tiêu đề
  page.getByTitle("IoT Dashboard")

Ưu Tiên User-facing Locator Hơn Là XPath Hoặc CSS

DOM của bạn có thể dễ dàng thay đổi nên việc để các bài kiểm tra của bạn phụ thuộc vào cấu trúc DOM có thể dẫn đến các bài kiểm tra không thành công. Ví dụ, thay vì chọn định vị button dưới đây theo class của nó, thì hãy cân nhắc định vị theo vai trò và tên button.

// 👍 User-facting Locator
page.getByRole('button', { name: 'submit' });

// 👎 Locator by CSS
page.locator('button.buttonIcon.episode-actions-later');

Phần Tử Con

Các locator có thể kết nối lại để thu hẹp phạm vi tìm kiếm vào một phần cụ thể của trang.

// Định vị radio button Option 1  
  page.locator('nb-card nb-radio :text-is("Option 1")');
	//Hoặc
  page.locator("bd-card").locator("nb-radio").locator(':text-is("Option 1)');

// Định vị button Si
  page.locator("nb-card").getByRole("button", { name: "Sign in" }).first();
	//Hoặc
  page.locator("nb-card").first().getByRole("button");

Phần Tử Cha

Các locator cũng có thể được định vị dựa trên một phần tử con của nó.

Ví dụ dưới đây thực hiện định vị phần tử cha có tag ‘nb-card’ dựa vào một thành phần con của nó có id là inputEmail

page.locator('nb-card', {has: page.locator('#inputEmail')})

//Hoặc
page.locator('#inputEmail').locator('..')

Sử dụng lại Locator

Một phần tử đã được định vị trên trang, có thể được sử dụng lại để định nghĩa các phần tử khác có cùng cách định vị với nó. Bằng cách này, bạn có thể tránh phải viết code lặp lại nhiều lần, và giúp code trở lên rõ ràng, dễ bảo trì hơn.

Thay vì định vị phần tử như này:

  await page
    .locator("nb-card", { hasText: "Basic form" })
    .getByRole("textbox", { name: "Email" })
    .fill("test@test.com");
  await page
    .locator("nb-card", { hasText: "Basic form" })
    .getByRole("textbox", { name: "Password" })
    .fill("your password");
  await page
    .locator("nb-card", { hasText: "Basic form" })
    .getByRole("button")
    .click();

Hãy viết lại thành:

  const basicForm = page.locator("nb-card", { hasText: "Basic form" });
  await basicForm.getByRole("textbox", { name: "Email" }).fill("test@test.com");
  await basicForm
    .getByRole("textbox", { name: "Password" })
    .fill("your password");
  await basicForm.getByRole("button").click();

Bài viết hôm nay xin tạm dừng ở đây. Cám ơn bạn đã đồng hành cùng mình. Hẹn gặp lại bạn trong bài viết tiếp theo.

Happy testing!

Category: Test Automation