Если две кнопки называются «Сохранить», найдите нужную область страницы и ищите кнопку внутри неё. getByRole() учитывает роль и доступное имя элемента. На Mentoring.digital разберём диалог «Параметры», рядом с которым может быть кнопка сохранения основной формы.
Определите область и имя
У нативного <button> обычно доступное имя берётся из текста. Диалог тоже должен иметь понятное имя. Например, заголовок можно связать с элементом диалога через aria-labelledby. Тогда локатор теста выражает действие, которое совершает пользователь.
const settings = page.getByRole("dialog", {
name: "Параметры",
exact: true,
});
const save = settings.getByRole("button", {
name: "Сохранить",
exact: true,
});
await expect(settings).toBeVisible();
await expect(save).toHaveCount(1);
await save.click();
await expect(page.getByRole("status"))
.toHaveText("Настройки сохранены");Фрагмент рассчитан на открытый диалог и страницу с областью статуса, которая обновляется после действия. Если сообщение в вашем приложении находится внутри определённого раздела, сузьте и этот локатор.
Разберите ошибку неоднозначного поиска
Если click() получил несколько подходящих элементов, сначала проверьте доступные имена и область поиска. Кнопка с иконкой может иметь имя из aria-label. Параметр exact отличит «Сохранить» от «Сохранить черновик». Когда имена совпадают полностью, добавьте область, например форму с собственным именем или диалог. Порядок кнопок на странице может меняться, поэтому для действия важна связь с областью.
Проверьте наблюдаемый результат
Добавьте в учебную страницу ещё одну кнопку с той же подписью вне диалога. Тест должен продолжить выбирать кнопку параметров. Затем измените сообщение в области статуса и убедитесь, что проверка отличает успешное действие от простого клика.
Такие сценарии можно закрепить на практике по тестированию и разобрать свои локаторы с наставником по QA.
