Как перейти от шутки с пользовательским путешествием, например тестов, к @playwright/test с использованием фикстур?

Question

Лично я вижу инструмент, который идет в направлении системных / сквозных тестов. Поэтому я использовал + для создания пользовательских путешествий и интегрировал их в процесс CI / CD.

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

Далее я возьму Amazon в качестве примера.

С + Первое, что я сделал, - это создал функцию для общей настройки окружения:

      function setupSuite({ browserOptions, userConfig }){
  // create playwright browser and use browserOptions as overrides
  // create page from browser
  // register self-implemented trace and screenshot reporters to page
  // go to baseUrl of current environment (e.g. local, branch etc..)
  // click on cookie banner, since it's blocking the UI
  // create a user based on userConfig (e.g. user has amazon prime user? payment options? etc.)
  // return { browser, page, user, ... }
}

И, конечно же, функция для повторной очистки всего:

      function teardownSuite(suite){
  // close browser
  // delete user
  // etc..
}

Затем я использовал бы файл для каждого пути пользователя. В случае Amazon путешествие пользователя может заключаться в успешной обработке заказа:

      describe("Successful Order", () => {
  let suite

  beforeAll(async () => {
    const userConfig = { isPrime: false, paymentOptions: [ "paypal", "visa" ] }
    suite = await setupBrowser({ userConfig })
    
    // I actually extracted that logic in a function to be able to use it in other tests too,
    // but just want to make clear whats happening here
    const { page, user } = suite
    await page.fill(".login-username-input", user.username)
    await page.fill(".login-password-input", user.password)
    await page.click(".login-submit-button")
  })

  afterAll(() => teardownSuite(suite))

  test("search for toothbrush with suggestions", async () => {
     const { page } = suite
     await page.fill(".search-input", "tooth")
     await page.click("text='toothbrush")
     // hit enter
     // do some assertions to check if the search was really successful
  })
  
  test("click on first item and add to chart", async () => {
     // page actions and assertions
  })

  test("go back, click on second item and add to chart", async () => {
     // page actions and assertions
  })

  test("go to chart and pay", async () => {
     // page actions and assertions
  })

  test("check order confirmation mail", async () => {
     // page actions and assertions
  })
})

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

Как лучше всего перенести это на + светильники?

• Как бы вы мигрировали / ? Да, вы могли бы использовать приспособление, но ожидает таких аргументов, как userConfig. Возможно ли иметь параметризованные светильники?
• Как бы вы структурировали тесты с приборами? Если вы хотите смоделировать полное путешествие пользователя, тесты становятся больше, чем, например, просто тестирование входа в систему. Тогда в тестовом блоке будет много строк без возможности их структурировать.
• Можно ли настроить страницу так, чтобы она использовалась во всех тестах? Хук не получает никакой страницы, и каждый блок всегда получает свою страницу. Это означает, что нет связи между блоки. Если вы создаете страницу вручную в и использовать один и тот же экземпляр страницы в каждом тесте, это, вероятно, было бы плохой практикой, а видео и трассировка, вероятно, не сработали бы ... Итак, что здесь можно сделать?
• Действительно ли путь пользователя, подобный тестам, плох? Я чувствую, что они не могут хорошо сочетаться с подходом к приспособлениям, упомянутым в документации. Светильники в чувствую себя очень что действительно не подходит тестирование IMO.

Answer 1

Как бы вы перенесли setupSuite/teardownSuite? Да, вы можете использовать приспособление, но setupSuite ожидает такие аргументы, как userConfig. Можно ли иметь параметризованные приборы?

Playwright Test изначально не поддерживает параметризованные приборы. Но вы можете добиться этого, создав динамические светильники. С помощью динамических приборов вы можете передавать данные конфигурации (например, userConfig), которые будут влиять на настройку приборов.

Ниже приведен пример того, как вы можете структурировать это в своем тестовом файле:

      const test = require('@playwright/test');

// Define a fixture that depends on the 'browser' fixture provided by Playwright Test.
// This fixture reads test-level options, so you can customize the behavior per test.
test.extend({
  setupSuite: async ({ browser, testInfo }, use) => {
    const userConfig = testInfo.userData || {};
    // create playwright browser and use browserOptions as overrides
    // create page from browser
    // register self-implemented trace and screenshot reporters to page
    // go to baseUrl of current environment (e.g. local, branch etc..)
    // click on cookie banner, since it's blocking the UI
    // create a user based on userConfig (e.g. user has amazon prime user? payment options? etc.)
    const suite = { /* browser, page, user, ... */ };
    await use(suite);
    // teardownSuite logic goes here, e.g. close browser, delete user, etc..
  },
});

test('my test', async ({ setupSuite }) => {
  // Here, setupSuite has the value provided by the fixture.
}, { userData: { isPrime: false, paymentOptions: ["paypal", "visa"] } });  // Test-level option to customize user.

Как бы вы структурировали тесты с фикстурами? Если вы хотите смоделировать полное путешествие пользователя, тесты становятся более масштабными, чем просто проверка входа в систему, например. Тогда тестовый блок будет содержать множество строк без возможности их структурирования.

Ключевым моментом является выделение последовательностей действий в их собственные вспомогательные функции. Рассматривайте каждую функцию как главу вашего романа о путешествии пользователя. Таким образом, ваши тесты могут больше напоминать оглавление, где каждый шаг представляет собой вызов одной из ваших вспомогательных функций.

Вот краткий пример того, что я имею в виду:

      // helper functions
async function loginUser(page, user) {
  await page.fill(".login-username-input", user.username);
  await page.fill(".login-password-input", user.password);
  await page.click(".login-submit-button");
}

async function searchForProduct(page, productName) {
  await page.fill(".search-input", productName);
  await page.click("text='" + productName + "'");
}

// actual test
test('Successful Order', async ({ page, user }) => {
  await loginUser(page, user);
  await searchForProduct(page, 'toothbrush');
  // add more actions as necessary, each in their own function
});

Каждая вспомогательная функция отвечает за одну часть пути пользователя, что упрощает чтение и поддержку ваших тестов. А если вам нужно изменить шаг в пути, вы просто обновляете соответствующую вспомогательную функцию, и все тесты, которые ее используют, тоже обновляются.

Можно ли настроить страницу так, чтобы она была доступна для всех тестов? Хук beforeAll не получает ни одной страницы, и каждый тестовый блок всегда получает свою собственную страницу. Это означает, что между тестовыми блоками нет связи. Если вы создадите страницу вручную в beforeAll и будете использовать один и тот же экземпляр страницы в каждом тесте, это, вероятно, будет плохой практикой, и видео и трассировка, вероятно, не будут работать... так что же здесь можно сделать?

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

Действительно ли путь пользователя, такой как тесты, плох? Я чувствую, что их нельзя хорошо сочетать с подходом драматурга, упомянутым в документации. Фикстуры в драматурге кажутся очень управляемыми данными, что, по моему мнению, не совсем подходит для сквозного тестирования.

Нет, пользовательские тесты совсем неплохие! На самом деле они очень полезны, потому что воспроизводят то, как реальные пользователи взаимодействуют с вашим приложением. Они помогают выявить проблемы, которые могут быть пропущены модульными тестами или тестами изолированных компонентов. Так что их определенно полезно иметь в своем наборе инструментов для тестирования.