对子元素使用querySelector

Question

我已经使用JavaScript几年了，为桌面应用程序的自动化测试编写脚本。然而，我最近已经过渡到使用剧作家为web应用程序编写自动化测试。我必须学习如何使用html/css选择器。我遇到的一件事是，如果有一种方法(我觉得一定有)，可以使用父元素指定页面上的元素，然后使用子元素指定元素。

例如，我有一个弹出窗口，它是一个带有ID和密码的基本登录页面。id和密码的文本框没有唯一的属性可指向，只有<input type="text">。但是，整个登录都有一个“页面选项”类，我知道我可以用document.querySelector('.page-options');来获取这个类。是否有一种方法可以使用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

使用label文本标识所需的输入：

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');