'Ошибка: ожидать (получено).toContain (ожидается) // ошибка indexOf'

Предлагаемый способ проверить заголовок страницы:

await expect(page).toHaveTitle(/.*expectedText/);

Совет: старайтесь избегать написания преждевременных абстракций. Если вы новичок в Playwright и изо всех сил пытаетесь получить правильный код, я бы забыл о POM для начала. Когда у вас есть правильный код, вы можете перенести его в POM. Если вы попытаетесь сделать несколько незнакомых вещей одновременно, легко запутаться.

Утверждение toContain проверяет, есть ли в строке подстрока. Передача объекта POM не будет работать.

Большинство ваших утверждений, вероятно, будут утверждениями локатора. Идиоматический подход Playwright заключается в использовании утверждений веб-первых, поэтому вы, вероятно, не будете часто использовать toContain, если только это не какая-то примитивная строка и не задействован локатор. Это не применимо здесь - у нас есть локатор.

Вот минимальный пример использования toHaveText, который кажется наиболее подходящим утверждением:

import {expect, test} from "@playwright/test"; // ^1.30.0

test("header has correct text", async ({page}) => {
  await page.setContent(
    `<h1>Your Versatile Partner for Better Offshoring</h1>`
  );
  await expect(page.locator("h1"))
    .toHaveText("Your Versatile Partner for Better Offshoring");
});

Убедитесь, что вы можете запустить этот тест и увидеть, как он проходит:

$ npx playwright test

Running 1 test using 1 worker

  ok 1 test.spec.mjs:5:1 › header has correct text (1.0s)


  1 passed (13.0s)

Всегда временно прерывайте тест, чтобы убедиться, что он не дает ложных срабатываний:

await expect(page.locator("h1")).toHaveText("NO");

    Error: expect(received).toHaveText(expected)

    Expected string: "NO"
    Received string: "hello world"
    Call log:
      - expect.toHaveText with timeout 5000ms
      - waiting for locator('h1')
      -   locator resolved to <h1>hello world</h1>
      -   unexpected value "hello world"

      4 |
      5 | test("header has 'hello world' text", async ({page}) => {
    > 6 |   await expect(page.locator("h1")).toHaveText("NO");
        |                                    ^
      7 | });

Далее напишите POM. Я буду проще и сделаю это в одном файле, но вы можете разбить это на отдельный файл и импортировать его.

class HomePage {
  constructor(page) {
    this.page = page;
    this.header = page.locator("h1");
  }

  async goto() {
    // replace this.page.goto for example purposes
    await this.page.setContent(
      `<h1>Your Versatile Partner for Better Offshoring</h1>`
    );
  }
}

test.describe("home page", () => {
  test("header has correct text", async ({page}) => {
    const homePage = new HomePage(page);
    await homePage.goto();
    await expect(homePage.header)
      .toHaveText("Your Versatile Partner for Better Offshoring");
  });
});

Запуск этого должен дать тот же результат.

После того, как вы это настроите, просто добавьте больше локаторов в конструктор, а затем добавьте методы действий более высокого уровня, такие как fillOutCredentials, acceptCookies и т. д., которые состоят из .fill() и .click() вызовов ваших локаторов. Тест может выглядеть так:

const loginPage = new LoginPage(page);
await loginPage.goto();
await loginPage.fillOutCredentials();
await expect(loginPage.username).toHaveText("some sample username");
await expect(loginPage.password).toHaveText("**********");
await loginPage.authenticate();
await expect(page).toHaveTitle("Welcome to the App");

Помните, низкоуровневые вызовы page.click(), page.fill() можно сгенерировать и встроить в тест для начала, а затем перенести в POM после того, как все утверждения будут пройдены и тщательно протестированы.

Обратите внимание, что при определении локатора селектор CSS, такой как h1[class='display-4 mb-4 mt-8'], не рекомендуется в Playwright, потому что он не обращен к пользователю . Поскольку у меня нет вашего DOM, я не могу предложить лучшее предложение, но, возможно, поищите роль арии или используйте генератор драматурга, чтобы он выбрал лучший для вас.

Даже если вы используете селектор CSS, предпочтите h1.display-4.mb-4.mt-8 вышеприведенному селектору атрибутов [class='...']. Причина в том, что при изменении порядка классов или добавлении дополнительного класса селектор атрибутов ломается. Версия с точечной нотацией не так требовательна к таким вещам, как порядок классов и пробелы, которые вам, вероятно, не нужно проверять.