Как сгенерировать тестовый код с Playwright

Привет,

Сегодня вы узнаете, как генерировать код для своих тестов.

Прежде всего, вам нужно запустить приложение, поэтому введите в свой терминал npm run dev , и ваше приложение будет запущено и запущено по адресу http://localhost:5173< /код>.

Теперь вам нужно запустить генератор кода Playwright. Для этого вам нужно открыть другую вкладку в своем терминале и ввести npx playwright codegen. Эта команда открывает новый браузер и Инспектора драматургов.

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

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

test('test', async ({ page }) => {
  await page.goto('http://localhost:5173/');
  await page.locator('._Square_pba4r_1').first().click();
  await page.locator('button:nth-child(5)').click();
  await page.locator('button:nth-child(6)').click();
  await page.locator('button:nth-child(7)').click();
  await page.locator('button:nth-child(3)').click();
  await page.locator('button:nth-child(9)').click();
  await page.locator('button:nth-child(2)').click();
});

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

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

Начнем с изменения названия теста с test на должен выиграть игрок "X" и изменения значения перехода с http://localhost:5173/ на /, потому что наш базовый корень соответствует домашней странице.

Тогда рефакторинг первого клика, вероятно, является хорошим рефакторингом для улучшения теста, поэтому вам нужно изменить строку с await page.locator('._Square_pba4r_1').first().click(); на await page.locator("button:nth-child(1)").click(); и, наконец, добавьте утверждение. В этом случае, если название теста должен выиграть игрок "X", лучшим утверждением будет что-то вроде этого

const winnerParagraph = await page.getByText(/winner/i);
await expect(winnerParagraph).toContainText("X");

Таким образом, код пытается получить абзац с текстом победителя и проверяет, содержит ли значение значение X. Окончательный результат таков:

test('should win the player "X"', async ({ page }) => {
    await page.goto("/");
    await page.locator("button:nth-child(1)").click();
    await page.locator("button:nth-child(5)").click();
    await page.locator("button:nth-child(6)").click();
    await page.locator("button:nth-child(7)").click();
    await page.locator("button:nth-child(3)").click();
    await page.locator("button:nth-child(9)").click();
    await page.locator("button:nth-child(2)").click();

    const winnerParagraph = await page.getByText(/winner/i);
    await expect(winnerParagraph).toContainText("X");
  });

Теперь вы можете запустить тест и проверить результат, который должен быть зеленым.

Хорошо, я думаю, что это все из-за генерации кода.

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

Вот и все, народ.

До скорой встречи 👋

p.s. вы можете найти результат этой статьи здесь