通过 data-testid 定位网页元素

Question

我正在使用 Playwright JavaScript 来自动化测试。这是我第一次尝试通过

data-testid

而不是

id

或 XPath 来调用元素。如果我像这样通过 XPath 调用一个元素，例如：

this.txtSearch = page.locator('xpath=//*[@id="root"]/div/main/section/div[1]/div[1]/div/div/input');

然后它就可以正确调用它。但是，如果我这样称呼它：

data-testid

我收到错误：

this.txtSearch = page.locator('[data-testid="SearchBar-InputText"]');

为什么会这样？我是不是打错方向了

Error: Timed out 5000ms waiting for expect(locator).toBeVisible()  
Locator: locator('[data-test-id="SearchBar-InputText"]')    
Expected: visible  
Received: <element(s) not found>  
Call log:  
- expect.toBeVisible with timeout 5000ms  
- waiting for locator('[data-testid="SearchBar-InputText"]')

？

Answer 1

data-testid

。您可以在

通过测试 ID 定位

阅读更多内容。 所以你的定位器必须是

getByTestId()

您可以使用字符串或正则表达式

this.txtSearch = page.getByTestId("SearchBar-InputText");
• <- as string
getByTestId("SearchBar-InputText")
• <- as regex
如果您需要更改属性名称，例如

getByTestId(/SearchBar-InputText/)

到

data-testid

你必须在

testid

 中完成

playwright.conf.ts

playwright.conf.ts