对子元素使用querySelector

Question

几年来，我一直在使用JavaScript为桌面应用程序的自动测试编写脚本。然而，我最近已经过渡到使用Playwright为web应用程序编写自动化测试。我必须学习如何使用html/css选择器。我一直想知道的一件事是，是否有一种方法(我觉得必须有(可以使用父元素和子元素在页面上指定元素。

例如，我有一个弹出窗口，它是一个带有ID和密码的基本登录页面。id和password的文本框没有可指向的唯一属性，只有<input type="text">。然而，整个登录具有类"；页面选项"；我知道我可以用CCD_ 2来获取。有没有一种方法可以使用剧作家的await page.fill();引用输入？

<div class="page-options">
<div>
<label>Page ID</label>
<input type="text">
</div>
<div>
<label>Page Password</label>
<input type="text">
</div>
</div>

Answer 1

使用标签文本识别所需输入：

await page.locator('text="Page ID" >> .. >> input').fill('name');  // label >> parent >> input
await page.locator('text="Page Password" >> .. >> input').fill('secret');
const value = await page.locator('text="Page Password" >> .. >> input').inputValue()  
expect(value).toEqual('secret')  

Answer 2

您可以使用第N个元素选择器：来执行类似的操作

//For username
await page.locator('input[type="text"] >> nth=0').fill('value');
//For password
await page.locator('input[type="text"] >> nth=1').fill('value');