Locator

Duy Văn | 10/02/2025

Để bắt một element trong Playwright thì các phương pháp sẽ có chút phong phú hơn so với Selenium

Nếu ở phía Selenium có 8 cách:

  • ID
  • Class
  • Tag
  • Name
  • Link Text
  • Partial Link Text
  • XPath
  • CSS Selector

Thì phía Playwright lại cung cấp một nhóm các phương pháp có tích hợp auto-wait

Dev của Playwright gợi ý một số locator như sau:

Locate get_by_

get_by_role_

Nó sẽ tìm kiếm element dựa trên role của nó, ví dụ như button, link, textbox, checkbox, radio, … đồng thời đưa vào tên chính xác của role để xác định đúng element cần tìm

locator = page.get_by_role('button', {'name': 'Submit'})

get_by_label

Trong tình huống element có cấu trúc DOM dạng

<label>Password <input type="password" /></label>

Việc sử dụng thẻ label rất tiện cho việc tương tác với form, vì thế ở đây có thể áp dụng get_by_label để tìm kiếm element dựa trên label của nó

locator = page.get_by_label('Password')
locator.fill('123456')

get_by_placeholder

Tìm kiếm element dựa trên placeholder của nó. Vì placeholder sinh ra chủ yếu là để gợi ý người dùng về nội dung input, nên thường nó rất cụ thể và có thể xác định chính xác chỉ bằng mình placeholder

locator = page.get_by_placeholder('Enter Item')

get_by_text

Đơn giản là xác định element theo text mà nó hiển thị

locator = page.get_by_text('Submit')

get_by_title

Tìm kiếm element dựa trên title của nó

locator = page.get_by_title('Submit')

Ngoài ra, các method này cũng có thể nhận vào RegEx chứ không chỉ là text, ví dụ với get_by_text:

locator = page.get_by_text(re.compile(r'^Submit$'))

Nó có nghĩa là tìm kiếm element có text bắt đầu và kết thúc bằng Submit

Nth

Trong tình huống get_by trả ra nhiều kết quả, có thể bắt theo index

locator = page.get_by_text('Submit')
locator.nth(1).click()

Tuy nhiên sử dụng phương pháp này rất mạo hiểm do page có thể thay đổi và làm cho index của nó trỏ đến một element khác

Locate XPath CSS

Đây là phương pháp tester quen thuộc với Selenium, sử dụng XPath

locator = page.locator('//button[text()="Submit"]')

hoặc CSS

locator = page.locator('button.submit')

Ngoài ra, Playwright cho phép hỗ trợ một số pseudo-class để bắt CSS Selector theo text, khá mạnh

locator = page.locator('button:has-text("Submit")')

Sử dụng CSS cũng hỗ trợ pseudo-class để bắt element nhìn thấy

locator = page.locator('button:visible')