Функция щелчка драматурга не работает в тестах
У меня проблема с функцией pw click()
эта строка полностью кликабельна на странице
<TableRow
key = {i}
whenClick = {() => this.handleClickRow(el.id)}
data-testId = {'warehousesRow'+`${i}`}
>
но этот тест выдает исключение, хотя в предыдущей строке с селектором все в порядке
test('warehouses table rows clickable', async ({
page,
baseURL,
}) => {
await page.goto(baseURL as string)
await checkKeyClock(page)
await expect(page.url()).toContain(baseURL)
await page.goto(baseURL as string + '/warehouses')
const tableRow = page.locator('data-testid = "warehousesRow1"')
try {
await tableRow.click();
} catch (error) {
console.error('Ошибка при клике на ряд таблицы:', error);
}
await expect(page.url()).toContain('view?id');
})
исключением является
steps: [],
complete: [Function: complete],
endWallTime: 1713781681655,
error: {
message: 'Error: locator.click: Test timeout of 30000ms exceeded.\n' +
'Call log:\n' +
` \x1B[2m- waiting for locator('data-testid = "warehousesRow1"')\x1B[22m\n`,
stack: 'Error: locator.click: Test timeout of 30000ms exceeded.\n' +
'Call log:\n' +
` \x1B[2m- waiting for locator('data-testid = "warehousesRow1"')\x1B[22m\n` +
'\n' +
' at /Users/anproskuryakova/frontend projects/ewms-ui/playwright/warehouses/wh-table.test.ts:32:21'
}
}
}
Похоже, на него нельзя нажать, но я могу щелкнуть и перемещаться по интерфейсу.
await continue(tableRow).toBeVisible работает отлично
я попробовал оба способа:( локатор найден нормально
Кавычки пробовали убрать? locator('data-testid=warehousesRow1')
Вы добавили круглые скобки после await expect(tableRow).toBeVisible? Это бесполезно, если вы этого не позвоните. Это должно быть await expect(tableRow).toBeVisible(), и в этом случае он должен потерпеть неудачу, если щелчок не удался. Обратите внимание, что try/catch — плохая практика в тестах. Тесты должны быть максимально детерминированными.
Ответы 2
Убедитесь, что скрипт переходит на правильную страницу, содержащую необходимый веб-элемент locator('data-testid="warehousesRow1"').
Для начала я бы поместил идентификатор теста внутри компонента нативного элемента. Компоненты предназначены для абстрагирования деталей, поэтому родительский компонент не должен (и не должен иметь возможности) устанавливать это свойство, вторгаясь в пространство дочернего элемента.
У вас могут быть повторяющиеся идентификаторы тестов, и если вы добавляете индекс к каждому из них, вы также можете использовать nth. nth — не лучшая практика, поскольку порядок обычно не имеет большого значения для пользователя. Поэтому лучше присвоить этому конкретному элементу более конкретный идентификатор теста и/или выбрать его по тексту или какой-либо другой отличительной характеристике.
Кроме того, стандартным стилем CSS является kebab-case.
'warehousesRow'+`${i}`
может быть просто:
`warehousesRow${i}`
HTML всегда записывает свойства в нижнем регистре, поэтому data-testId отображается как data-testid, особенно при использовании React, который также записывает свойства в нижний регистр (и преобразует className в class и т. д.). Это можно выбрать с помощью getByTestId():
import {expect, test} from "@playwright/test"; // ^1.42.1
const html = `<!DOCTYPE html><html><body>
<div data-testId = "warehousesRow1">test</div>
</body></html>`;
test("warehousesRow exists", async ({page}) => {
await page.setContent(html);
await expect(page.getByTestId("warehousesRow1")).toBeVisible();
});
Лучше:
const html = `<!DOCTYPE html><html><body>
<div data-testid = "warehouse-row">foo</div>
<div data-testid = "warehouse-row">bar</div>
<div data-testid = "warehouse-row">baz</div>
</body></html>`;
test("first warehouse row has text 'foo'", async ({page}) => {
await page.setContent(html);
await expect(page.getByTestId("warehouse-row").first()).toHaveText("foo");
});
Вы также можете установить собственный идентификатор теста, если необходимо, но я не рекомендую это делать. Измените исходный код (или попросите своих инженеров), чтобы он использовал стандартный идентификатор теста, если можете, желательно data-testid в нижнем регистре.
Если вам необходимо использовать синтаксис атрибутов CSS, правильным подходом будет использование скобок (при условии, что ваша исходная версия):
await expect(page.locator('[data-testid = "warehousesRow1"]')).toBeVisible();
Но getByTestId гораздо читабельнее, поэтому предпочитайте его почти всегда.
большое спасибо за ваш ответ! getByTestId сработал
Я не особо знаком с драматургом, но у вас в компоненте есть
data-testId, а в тестеdata-testid.