https://playwright.dev/docs/actionability

Giới thiệu

• Playwright tự động chờ (auto waiting) cho tới khi element được load xong trước khi thực hiện hành động được yêu cầu (VD: click, tab,…) trong 1 khoảng thời gian nhất định (timeout).

• Nếu element không được load xong trong timeout, test sẽ fail với lỗi TimeoutError. Bạn có thể đọc thêm về timeout tại Playwright timeout

• VD: Với action locator.click(), trước khi click vào element, Playwright sẽ:

  • Kiểm tra locator này trỏ đến 1 element duy nhất
  • Đợi element visible
  • Đợi element stable
  • Element không bị disabled hoặc che bởi 1 element khác

• Bảng dưới đây nêu đầy đủ các bước Playwwight đợi các states của element trước khi thực hiện hành động được yêu cầu:

  Action	Visible	Stable	Receives Events	Enabled	Editable
  locator.check()	Yes	Yes	Yes	Yes	–
  locator.click()	Yes	Yes	Yes	Yes	–
  locator.dblclick()	Yes	Yes	Yes	Yes	–
  locator.setChecked()	Yes	Yes	Yes	Yes	–
  locator.tap()	Yes	Yes	Yes	Yes	–
  locator.uncheck()	Yes	Yes	Yes	Yes	–
  locator.hover()	Yes	Yes	Yes	–	–
  locator.dragTo()	Yes	Yes	Yes	–	–
  locator.screenshot()	Yes	Yes	–	–	–
  locator.fill()	Yes	–	–	Yes	Yes
  locator.clear()	Yes	–	–	Yes	Yes
  locator.selectOption()	Yes	–	–	Yes	–
  locator.selectText()	Yes	–	–	–	–
  locator.scrollIntoViewIfNeeded()	–	Yes	–	–	–
  locator.blur()	–	–	–	–	–
  locator.dispatchEvent()	–	–	–	–	–
  locator.focus()	–	–	–	–	–
  locator.press()	–	–	–	–	–
  locator.pressSequentially()	–	–	–	–	–
  locator.setInputFiles()	–	–	–	–	–

• Với 1 vài action nhất định, bạn có thể force Playwright không check 1 số states không cần thiết. Ví dụ, khi thêm param { force: true } vào hàm gọi action locator.click(), Playwright sẽ không kiểm tra xem element đó có nhận được sự kiện click() hay không:

await page.locator("#submit-button").click({ force: true });

Assertions

• Tương tự với auto waiting, Playwright sẽ tự động chờ và kiểm tra liên tục các điều kiện mong muốn (VD: element đã enable chưa, checkbox đã được check chưa, …) thay vì báo fail test ngay lần kiểm tra đầu tiên.
• Lưu ý là bạn cần sử dụng await khi gọi các phương thức assertion để chờ điều kiện được thực thi:

await expect(page.getByTestId("status")).toHaveText("Submitted");

• Dưới đây là danh sách các phương thức assertion và mô tả:

  Assertion	Mô tả
  expect(locator).toBeAttached()	Element được attached
  expect(locator).toBeChecked()	Checkbox được chọn
  expect(locator).toBeDisabled()	Element bị disabled
  expect(locator).toBeEditable()	Element có thể chỉnh sửa được
  expect(locator).toBeEmpty()	Container trống
  expect(locator).toBeEnabled()	Element được enabled
  expect(locator).toBeFocused()	Element được focused
  expect(locator).toBeHidden()	Element không visible
  expect(locator).toBeInViewport()	Element hiển thị trên màn hình
  expect(locator).toBeVisible()	Element visible
  expect(locator).toContainText()	Element có bao gồm đoạn text nhất định
  expect(locator).toHaveAttribute()	Element có thuộc tính được truyền vào trong DOM
  expect(locator).toHaveClass()	Element có CSS class được truyền vào
  expect(locator).toHaveCount()	Số lượng element được tìm thấy bởi locator expect
  expect(locator).toHaveCSS()	Element có các thuộc tính CSS đúng với expect
  expect(locator).toHaveId()	Element có ID đúng với expect
  expect(locator).toHaveJSProperty()	Element có các thuộc tính CSS Javascript với expect
  expect(locator).toHaveText()	Element có chính xác đoạn text được chỉ định
  expect(locator).toHaveValue()	Input có đoạn text được chỉ định
  expect(locator).toHaveValues()	Ô select đã chọn những options được chỉ định
  expect(page).toHaveTitle()	Title truyền vào chính xác với title của Page
  expect(page).toHaveURL()	URL truyền vào chính xác với URL của Page
  expect(response).toBeOK()	Response có status OK

• Hiểu rõ hơn tại assertions guild.

Visible

• Element được coi là visible khi có bounding box khác không và và không có thuộc tính CSS visibility:hidden, nên:
  • Element có width hoặc height bằng 0 không được coi là visible
  • Element có thuộc tính CSS display:none không được coi là visible
  • Element có opacity:0 được coi là visible

Stable

• Element stable khi có bounding box giống nhau trong ít nhất 2 khung hình động liên tiếp

Enabled

• Element sẽ được coi là enabled khi nó không phải button, select, input hoặc textarea có thuộc tính disabled.

Editable

• Element có thể chỉnh sửa được khi nó enabled và không chứa thuộc tính readonly

Receives Events

• Khi có 1 action, ví dụ là click() vào 1 button tại vị trí (10, 10), Playwright sẽ kiểm tra xem có 1 element nào khác tại vị trí (10, 10) (chẳng hạn là poup hay overlay) có nhận được sự kiện click() hay không.