Locators

• getByLabel(role, options)
  • label 태그 또는, aria-labelledby 이거나, aria-label 값을 찾을 때
    

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

• locator(selector)
  
  • 일반적인 CSS 선택자, #id 이거나 .class로 선택
    

    await page.locator('#id');
    await page.locator('.class');

    
    
  • Xpath 상대 또는 절대 경로를 선택

    await page.locator('//*[@attribute="value"]');

     
• getByText(text, options)
  • 단순히 innerText 로 있는 text로 찾을 때 사용

    await page.getByText('Welcome, John!')

• getByRole(role, options)
  • button, heading, checkbox 등 role을 사용해서 선택
    

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

     
• getByPlaceholder(placeholder, options)
  • input에 있는 placeholder로 찾을 때, 보통 input에서 쓰다보니 fill이랑 같이 바로 쓰이기도함.
    

    await page.getByPlaceholder('search value')

    
    
• getByAltText(altText, options)
  • 이미지의 alt text 값을 갖고 찾을 때
    

    await page.getByAltText('image logo')

      

• getByTitle(title, options)
  • element에 title attribute 값으로 찾을 때
    

    await page.getByTitle('Issues count')

• getByTestId(data-test-id)

  • data-testid 값으로 선택 (제일 best 아닐까... 흑흑..)

    await page.getByTestId('test-id').click();

     

• framelocator(altText, options)
  • 페이지에서 iframe을 구분해서 선택할 때
    

    await page.frameLocator('#my-frame')

생각보다 많은 선택할 수 있는데, 

이 button:has-text 등 pseudo-classes 를 사용할 수도 있음.
visible, :has-text(), :has(), :is(), :nth-match() and more.

    await page.locator('button:has-text("추가")').click();

 

참고 Locators | Playwright

Locators | Playwright