В мире интеграционных тестов есть крутой паттерн Page Object. Суть его в том, что вы обращаетесь к тестируемому приложению не напрямую из кода тестов, а делаете слой абстракции — обертку, которая содержит логику работы с элементами вашего интерфейса. Вы сможете переиспользовать логику, помещенную в обертке, во всех местах, где она нужна, а код тестов станет проще и понятнее.

Например, представьте, что у вас есть тест на Playwright, в котором написано:

// кликаем по ссылке "Get started"
await page.getByRole('link', { name: 'Get started' }).click();

Вы можете сделать PageObject

class HomePage {
  // в конструкторе получаем page,
  // через который происходит
  // взаимодействие с браузером
  constructor(private page) {}

  // свойство для доступа к ссылке "Get started"
  get GetStarted() {
    return this.page.getByRole('link', { name: 'Get started' });
  }
}

тогда код теста будет выглядеть примерно так:

const homePage = new HomePage(page);

await homePage.GetStarted.click();

Теперь во всех местах, где вам нужно кликнуть по ссылке "Get started", вам не нужно заново писать код, который обращается к ней. Вы можете просто создать Page Object и обратиться к его свойству. Очень удобно!

А самое замечательное — этот подход применим и для модульных тестов. Отличие в том, что код интеграционных тестов выполняется вне браузера и отправляет команды через специальный API (Selenium или CDP), а код модульных тестов выполняется в одном контексте с кодом тестируемого интерфейса и может напрямую оперировать DOM элементами.

class HomePage {
  constructor(private page: Element) {}

  get GetStarted() {
    // используем функцию getByRole из библиотеки @testing-library/dom
    return getByRole(this.page, 'link', { name: 'Get started' });
  }
}

Я написал небольшую библиотеку jsdom-fragments. Она содержит API, с помощью которого можно легко описывать Page Objects для модульных тестов в jsdom. Похожий API мы используем в Яндексе уже 4 года и это очень удобно. Теперь вы тоже можете попробовать Page Objects в своих модульных тестах!

https://www.npmjs.com/package/jsdom-fragments