🕸️Двоюродные локаторы 🎭Playwright

На индексы нельзя положиться, если порядок элементов не последователен, или количество элементов меняется.

Использование динамических тестовых идентификаторов (типа edit-${username}-button) может быть сложным в создании и также ненадежным, ибо зависит от форматирования динамической части локатора.

Если страница отображает несколько экземпляров одного и того же элемента (компонента), стратегия локаторов должна уметь надежно находить элемент, который нужен для теста.

На индексы нельзя положиться, если порядок элементов не последователен, или количество элементов меняется. Использование динамических тестовых идентификаторов (типа edit-${username}-button) может быть сложным в создании и также ненадежным, ибо зависит от форматирования динамической части локатора.

Использование того, что я называю «локаторами-кузенами» или двоюродными локаторами (cousin locators), чтобы найти нужный сейчас элемент, является гораздо более надежным и универсальным решением.

Пример

В примере ниже я хочу нажать кнопку «Edit» для пользователя Dawn Summers.

Если мы просто попытаемся нажать кнопку редактирования, как показано ниже, тест завершится ошибкой, поскольку существует несколько элементов, соответствующих этому локатору.

await page.getByTestId('edit-profile-button').click()

Поэтому нам необходимо сузить область поиска, чтобы он искал кнопку только в контейнере профиля Дон.

Мы можем начать с выбора уникального элемента внутри каждого контейнера. ID пользователя является хорошим примером в этом сценарии. Предполагая, что ID пользователя Дон остается постоянным между тестовыми запусками, мы можем получить этот элемент, используя следующее:

page.getByTestId(‘user-id’).filter({hasText: ‘920437’})

Исходя из этого, мы можем работать вверх, чтобы получить контейнер пользователя.

getProfileContainer(userId: string) {
  const userIdElement = page.getByTestId(‘user-id’).filter({hasText: userId})
  return page.getByTestId(‘profile-container’).filter({has: userIdElement})
}

Теперь, когда у нас есть правильный контейнер профиля, мы можем искать внутри этого контейнера и нажать на нужную нам кнопку редактирования.

async clickEditProfileButton(userId: string) {
  const profileContainer = getProfileContainer(userId);
  await profileContainer.getByTestId(‘edit-profile-button’).click()
}

Вот и все. Теперь мы можем надежно нажать соответствующую кнопку на основе предоставленного нами ID пользователя. Вот полный вид этого кода в файле объектной модели страницы (Page Object Model file):

export class profileList {
  readonly page: Page;
  readonly profileContainer: Locator;
  readonly userId: Locator;
  readonly editProfileButton: Locator;

  constructor(page: Page) {
    this.page = page;
    this.profileContainer = page.getByTestId(‘profile-container’);
    this.userId = page.getByTestId(‘user-id’);
    this.editProfileButton = page.getByTestId(‘edit-profile-button’);
  }

  getProfileContainer(userId: string) {
    const userIdElement = this.userId.filter({hasText: userId})
    return this.profileContainer.filter({has: userIdElement})
  }

  async clickEditProfileButton(userId: string) {
    const profileContainer = this.getProfileContainer(userId);
    await profileContainer.locator(this.editProfileButton).click()
  }

}

Зоя Клегг