Playwright Selectors Practice

Trang này giúp bạn thực hành các phương thức locator của Playwright

1. page.getByRole()

Tìm element theo ARIA role - cách được khuyến khích nhất!

Buttons (role="button")

page.getByRole('button', { name: 'Submit Form' })

Links (role="link")

page.getByRole('link', { name: 'About Us' })

Headings (role="heading")

Main Title H1

Section Title H2

Subsection Title H3

page.getByRole('heading', { name: 'Main Title H1', level: 1 })

Checkboxes & Radio (role="checkbox", role="radio")

page.getByRole('checkbox', { name: 'I agree to Terms of Service' })

Textbox (role="textbox")

page.getByRole('textbox', { name: 'Search products' })

Combobox (role="combobox")

page.getByRole('combobox', { name: 'Country selection' })

Table (role="table", "row", "cell")

ID Name Email Status
1 John Doe john@example.com Active
2 Jane Smith jane@example.com Pending
3 Bob Wilson bob@example.com Inactive
page.getByRole('table', { name: 'User data table' })
page.getByRole('row', { name: /John Doe/ })

Dialog (role="dialog")

page.getByRole('dialog')
page.getByRole('dialog').getByRole('button', { name: 'Confirm' })

2. page.getByText()

Tìm element theo nội dung text

Text Đơn Giản

HocTest.Com(text nằm trong 2 thẻ)
HocTest

Text có nhiều khoảng trắng

PlaywrightVN .Com
PlaywrightVN

Input với type là button hoặc submit

Status Messages

Operation completed successfully!
page.getByText('Operation completed successfully!')
page.getByText(/error occurred/i)

3. page.getByLabel()

Tìm form control theo label text - rất hữu ích cho forms!

Input Fields with Labels

page.getByLabel('Full Name')
page.getByLabel('Email Address')
page.getByLabel('Password').first() // Lấy cái đầu tiên
page.getByLabel('Biography')

Checkbox and Radio with Labels

Notification Preferences
page.getByLabel('Email Notifications')
page.getByLabel('SMS Notifications')

4. page.getByPlaceholder()

Tìm input theo placeholder text

Search and Input Fields

page.getByPlaceholder('Search products...')
page.getByPlaceholder('Enter your email')
page.getByPlaceholder(/message/i)

5. page.getByAltText()

Tìm element (thường là img) theo alt text

Image Gallery

Product 1 - Laptop Product 2 - Smartphone Product 3 - Headphones
page.getByAltText('Product 1 - Laptop')
page.getByAltText(/Smartphone/)

Logo and Icons

Company Logo User Avatar Settings Icon
page.getByAltText('Company Logo')
page.getByAltText('User Avatar')

Image with Area Map

Interactive Map Section A Section B Section C
page.getByAltText('Interactive Map')
page.getByAltText('Section A')

6. page.getByTitle()

Tìm element theo title attribute (tooltip)

Elements with Title (Tooltips)

Hover me for info Home Link
page.getByTitle('Click to save your changes')
page.getByTitle('Click to delete this item permanently')
page.getByTitle(/additional information/)

Icons with Titles

page.getByTitle('Edit item')
page.getByTitle('Share item')

SVG and Images with Title

HTML CSS JS
page.getByTitle('Loading spinner')
page.getByTitle('HyperText Markup Language')

7. page.getByTestId()

Tìm element theo data-testid attribute - ổn định nhất cho testing!

Elements with data-testid

Product Information

Awesome Product

$99.99

This is an amazing product that you will love!

page.getByTestId('product-card')
page.getByTestId('product-name')
page.getByTestId('add-to-cart-btn')

Form with Test IDs

Forgot Password?
page.getByTestId('login-form')
page.getByTestId('username-input')
page.getByTestId('login-submit-btn')

Dynamic Content with Test IDs

  • Learn Playwright
  • Write automation tests
  • Practice selectors
page.getByTestId('todo-list')
page.getByTestId('todo-item-1')
page.getByTestId('todo-checkbox-2')

Table with Test IDs

Order ID Product Amount Actions
#001 Laptop $1,200.00
#002 Phone $800.00
page.getByTestId('orders-table')
page.getByTestId('order-row-001')
page.getByTestId('cancel-order-002')

Summary - Selector Priority

Thứ tự ưu tiên khi chọn selector:

  1. getByRole() - Ưu tiên nhất, accessible và ổn định
  2. getByLabel() - Tốt cho form elements
  3. getByPlaceholder() - Khi input có placeholder rõ ràng
  4. getByText() - Cho text content không phải interactive
  5. getByAltText() - Cho images
  6. getByTitle() - Cho elements có tooltip
  7. getByTestId() - Fallback khi các cách khác không phù hợp