相当于 cypress 中的 find() 的剧作家
[英]playwright equivalent of find() in cypress
问题描述
Is there a way to traverse through html elements in playwright like cy.get("abc").find("div") in cypress?
有没有办法像cypress中的cy.get("abc").find("div")一样遍历playwright中的html个元素？
In other words, any find() equivalent method in playwright?换句话说，剧作家中有任何find()等效方法吗？
page.locator("abc").find() is not a valid method in playwright though:( page.locator("abc").find()在剧作家中不是一个有效的方法:(
3 个解决方案
解决方案1
3 2022-11-15 14:46:13
If you assign the parent element handle to a variable, any of the findBy* functions (or locator ) will search only in the parent element.如果将父元素句柄分配给变量，则任何findBy*函数（或locator ）都将仅在父元素中搜索。 An example below where the parent is a div , the child is a button , and we use .locator() to find the elements.下面的示例中，父级是div ，子级是button ，我们使用.locator()来查找元素。
test('foo', async ({ page }) => {
await page.goto('/foo');
const parent = await page.locator('div');
const child = await parent.locator('button');
});
解决方案2
2 已采纳 2022-11-15 20:30:31
You can just combine the selectors, this will resolve to div below abc您可以组合选择器，这将解析为abc下面的div
page.locator("abc div")
解决方案3
1 2022-11-15 18:52:20
Let's consider the website https://www.example.com with the following HTML让我们考虑网站https://www.example.com和以下 HTML
<body style="">
<div>
<h1>Example Domain</h1>
<p>This domain is for use in illustrative examples in documents. You may use this
domain in literature without prior coordination or asking for permission.</p>
<p>
<a href="https://www.iana.org/domains/example">More information...</a>
</p>
</div>
</body>
As mentioned by @agoff, you can use nested locator page.locator('p').locator('a') or you can specify the nested selector directly in the locator page.locator('p >> a')正如@agoff 所提到的，您可以使用嵌套定位器page.locator('p').locator('a')或者您可以直接在定位器page.locator('p >> a')中指定嵌套选择器
// @ts-check
const playwright = require('playwright');
(async () => {
const browser = await playwright.webkit.launch();
const context = await browser.newContext();
const page = await context.newPage();
await page.goto('https://www.example.com/');
// Here res1 and res2 produces same output
const res1 = await page.locator('p').locator('a'); // nested locator
const res2 = await page.locator('p >> a'); // directly specifying the selector to check the nested elements
const out1 = await res1.innerText();
const out2 = await res2.innerText();
console.log(out1 == out2); // output: true
console.log(out1); // output: More information...
console.log(out2); // output: More information...
// Traversal
const result = await page.locator('p');
const elementList = await result.elementHandles(); // elementList will contain list of <p> tags
for (const element of elementList)
{
const out = await element.innerText()
console.log(out);
}
// The above will output both the <p> tags' innerText i.e
// This domain is for use in illustrative examples in...
// More information...
await browser.close();
})();
Since you mentioned that you need to traverse through the HTML elements, elementHandles can be used to traverse through the elements specified by the locator as mentioned in the above code.既然你提到需要遍历HTML个元素，那么上面代码中提到的可以使用elementHandles来遍历locator指定的元素。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.