Фильтровать локатор getByRole по атрибуту того же элемента
Учитывая следующий HTML:
...
<div class = "table">
<div role = "row" row-id = "1">...</div>
<div role = "row" row-id = "2">...</div>
<div>
...
Как я могу использовать локатор getByRole('row'), чтобы получить div с row-id = "1"?
Использование getByRole('row').filter('[row-id = "1"]') не работает, поскольку filter применяется только к дочерним элементам.
Однако, согласно документации , локатор фильтра «запрашивается, начиная с совпадения внешнего локатора», поэтому фильтр действительно должен работать? Я что-то пропустил?
Использование аргумента options.name из getByRole() не вариант.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы можете использовать локатор и.
await expect(page.getByRole("row").and(page.locator('[row-id = "1"]'))).toHaveText("1 ROW");
Но я думаю, что вы можете решить эту проблему с помощью всего лишь одного выражения CSS.
await expect(page.locator(".table [row-id='1']")).toHaveText("1 ROW");
Ваш первый пример также мог бы решить мою проблему, но я выбрал предложение @ggorlen, используя :scope, так как считаю его более читабельным. В любом случае спасибо!
Если вы пытаетесь утверждать текстовое содержимое, самый чистый подход — использовать ключ getByRolename::
import {expect, test} from "@playwright/test"; // ^1.42.1
const html = `<!DOCTYPE html><html><body>
<div class = "table">
<div role = "row" row-id = "1">A</div>
<div role = "row" row-id = "2">B</div>
<div>
</body></html>`;
test("Row 1 has text 'A'", async ({page}) => {
await page.setContent(html);
await expect(page.getByRole("row", {name: "A", exact: true})).toBeVisible();
});
Если вы не хотите утверждать текст, также возможно использование :scope, позволяющее включить текущий узел в контекст запроса:
const row = page.getByRole("row").locator('[row-id = "1"]:scope');
Обычно я избегаю .filter(), потому что синтаксис довольно запутанный — он использует ключ has: в аргументе объекта, разрывая основную цепочку вызовов локатора.
Если вы выполняете парсинг, а не тестирование, то я бы просто использовал простой CSS, как предложено в этом ответе.
Тем не менее, вам может потребоваться предоставить больше контекста для вашего варианта использования (полное HTML-дерево с контейнерами), потому что может быть лучший способ сделать это. Если row-id уникальны, то это фактически data-testid, к которым можно запрашивать напрямую, без контекстного запроса getByRole.
Всегда полезно поделиться более полным HTML-деревом в соответствии с этими рекомендациями по вопросам веб-автоматизации по мета . Причина в том, что иногда лучший способ выбрать элемент связан с контекстом, который здесь не указан. Вы используете «Драматург-тест» или просто «Драматург»? Веб-скрапинг или тестирование? И если вы можете поделиться реальным сайтом, своей основной целью и минимально воспроизводимым примером , это идеально. Спасибо.