Есть ли способ пройти через html-элементы в драматурге, например cy.get("abc").find("div")
в кипарисе?
Другими словами, любой find()
эквивалентный метод у драматурга?
page.locator("abc").find()
не является допустимым методом в драматургии :(
Нужна такая же функция в драматурге, где я могу просматривать элементы html. У нас есть что-то подобное?
Если вы назначите дескриптор родительского элемента переменной, любая из функций findBy*
(или locator
) будет искать только в родительском элементе. Пример ниже, где родителем является div
, потомком является button
, и мы используем .locator()
для поиска элементов.
test('foo', async ({ page }) => {
await page.goto('/foo');
const parent = await page.locator('div');
const child = await parent.locator('button');
});
Давайте рассмотрим сайт 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>
Как упоминал @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.info(out1 == out2); // output: true
console.info(out1); // output: More information...
console.info(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.info(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();
})();
Поскольку вы упомянули, что вам нужно пройти через элементы HTML, elementHandles можно использовать для обхода элементов, указанных локатором, как указано в приведенном выше коде.
Вы можете просто объединить селекторы, это разрешится div
ниже abc
page.locator("abc div")
Согласно cypress docs, кажется, что он пытается найти потомков данного селектора. Вы этого хотите? Или любой другой конкретный вариант использования?