无法运行剧作家“编写断言”示例

Question

TL;DR

无法从剧作家开始页面获得“写断言”示例才能工作。

完整的故事

我正在看剧作家编写测试。我正在研究快速入门示例，并且示例2(编写断言)存在问题。我是在我的工作机器(macOS)上这样做的，还没有机会在我的Linux机器上尝试，如果这有什么区别的话。

有关的例子是：

// example.spec.js
const { test, expect } = require('@playwright/test');

test('my test', async ({ page }) => {
  await page.goto('https://playwright.dev/');

  // Expect a title "to contain" a substring.
  await expect(page).toHaveTitle('Playwright');

  // Expect an attribute "to be strictly equal" to the value.
  await expect(page.locator('text=Get Started')).toHaveAttribute('href', '/docs/intro');

  // Expect an element "to be visible".
  await expect(page.locator('text=Learn more')).toBeVisible();

  await page.click('text=Get Started');
  // Expect some text to be visible on the page.
  await expect(page.locator('text=System requirements')).toBeVisible();

  // Compare screenshot with a stored reference.
  expect(await page.screenshot()).toMatchSnapshot('get-started.png');
});

我最初的问题是这一行失败了：

await expect(page).toHaveTitle('Playwright');

我能够通过更改.toHaveTitle()来查找正则表达式来解决这个问题，所以现在它看起来如下所示：

// 02_writing_assertions.spec.js
const { test, expect } = require('@playwright/test');

test('my test', async ({ page }) => {
  await page.goto('https://playwright.dev/');

  // Expect a title "to contain" a substring.
  await expect(page).toHaveTitle(/Playwright/);  // Updated to regex

  // Expect an attribute "to be strictly equal" to the value.
  await expect(page.locator('text=Get Started')).toHaveAttribute('href', '/docs/intro');

  // Expect an element "to be visible".
  await expect(page.locator('text=Learn more')).toBeVisible();

  await page.click('text=Get Started');

  // Expect some text to be visible on the page.
  await expect(page.locator('text=System requirements')).toBeVisible();

  // Compare screenshot with a stored reference.
  expect(await page.screenshot()).toMatchSnapshot('get-started.png');
});

但是，当我运行它时，我现在得到以下内容：

❯ npx playwright test tests/getting_started/02_writing_assertions.spec.js --headed

Running 1 test using 1 worker

  ✘  tests/getting_started/02_writing_assertions.spec.js:4:1 › my test (4s)


  1) tests/getting_started/02_writing_assertions.spec.js:4:1 › my test =============================

    locator.getAttribute: Evaluation failed: Error: strict mode violation: selector resolved to 2 elements.
        at u.querySelector (<anonymous>:3:34807)
        at eval (eval at evaluate (:3:1339), <anonymous>:7:32)
        at i (<anonymous>:3:37685)
        at <anonymous>:3:37773
        at Object.run (<anonymous>:3:38253)
        at eval (eval at evaluate (:3:1339), <anonymous>:1:14)
        at t.default.evaluate (<anonymous>:3:1362)
        at t.default.<anonymous> (<anonymous>:1:44)
    =========================== logs ===========================
      retrieving attribute "href" from "text=Get Started"
      strict mode violation: selector resolved to 2 elements.
    ============================================================

       9 |
      10 |   // Expect an attribute "to be strictly equal" to the value.
    > 11 |   await expect(page.locator('text=Get Started')).toHaveAttribute('href', '/docs/intro');
         |                                                  ^
      12 |
      13 |   // Expect an element "to be visible".
      14 |   await expect(page.locator('text=Learn more')).toBeVisible();

        at /Users/me/node_modules/@playwright/test/lib/test/matchers/matchers.js:131:27
        at /Users/me/node_modules/@playwright/test/lib/test/matchers/toMatchText.js:48:22
        at pollUntilDeadline (/Users/me/node_modules/@playwright/test/lib/test/util.js:119:42)
        at Object.toMatchText (/Users/me/node_modules/@playwright/test/lib/test/matchers/toMatchText.js:47:37)
        at Object.toHaveAttribute (/Users/me/node_modules/@playwright/test/lib/test/matchers/matchers.js:130:35)
        at Object.<anonymous> (/Users/me/node_modules/@playwright/test/lib/test/expect.js:94:30)
        at __EXTERNAL_MATCHER_TRAP__ (/Users/me/node_modules/expect/build/index.js:342:30)
        at Object.throwingMatcher (/Users/me/node_modules/expect/build/index.js:343:15)
        at /Users/me/dev/playwright/playwright-test/tests/getting_started/02_writing_assertions.spec.js:11:50
        at WorkerRunner._runTestWithBeforeHooks (/Users/me/node_modules/@playwright/test/lib/test/workerRunner.js:425:7)


  1 failed
    tests/getting_started/02_writing_assertions.spec.js:4:1 › my test ==============================

注释掉每个await expect(...)语句只会重复下一个await expect(...)语句中的错误。如果我将它们全部注释掉，那么await page.click(...)将按预期运行，但是下一个await expect(...)再次失败。

更新

So...it似乎是问题所在，问题是写入的page.locator(...)返回了多个元素，我看到了以下错误，这一点应该是显而易见的：

评估失败:错误:严格的模式冲突:选择器被解析为2个元素。

因此，我更改了以下一行：

await expect(page.locator('text=Get Started')).toHaveAttribute('href', '/docs/intro');

至

await expect(page.locator('//a[text()="Get Started"][1]')).toHaveAttribute('href', '/docs/intro');

我以为这能解决这个问题。不过，现在我要暂停一下了。

Answer 1

我几乎解决了所有的问题。我还无法解决初始脚本的一个问题是这一行：

// Expect some text to be visible on the page.
await expect(page.locator('text=System requirements')).toBeVisible();

此字符串在页面上出现两次。在尝试各种搜索字符串(即xpath)的方法时，我的代码要么返回两个元素，要么超时。因为这是页面上的任意字符串，而不是需要单击才能继续下一步的元素，所以我只是替换了另一个字符串。

工作脚本如下：

// 02_writing_assertions.spec.js
const { test, expect } = require('@playwright/test');

test('my test', async ({ page }) => {
  await page.goto('https://playwright.dev/');

  // Expect a title "to contain" a substring.
  await expect(page).toHaveTitle(/Playwright/);

  // Expect an attribute "to be strictly equal" to the value.
  await expect(page.locator('(//a[translate(text(),"get started","GET STARTED")="GET STARTED"])[1]')).toHaveAttribute('href', '/docs/intro');

  // Expect an element "to be visible".
  await expect(page.locator('(//a[translate(text(),"learn more", "LEARN MORE")="LEARN MORE"])[1]')).toBeVisible();

  // Click "Get Started"
  await page.click('(//a[translate(text(),"get started","GET STARTED")="GET STARTED"])[1]')

  // Expect some text to be visible on the page.
  await expect(page.locator('(//h1[contains(translate(text(),"getting started","GETTING STARTED"),"GETTING STARTED")])[1]')).toBeVisible()

  // Compare screenshot with a stored reference.
  expect(await page.screenshot()).toMatchSnapshot('get-started.png');
});

关于我的xpath语句的几项内容：

• 我总是将我的文本字符串翻译成大写，以便进行比较，只是为了加强针对将来的错误的测试，该错误将"Get Started“转换为"GEt Started”。
• 与始终引用特定元素设置的xpath返回相同，它针对将来有人添加的同一个URL的第二个实例而变硬。