Playwright新手求助：使用data-qa定位元素时出现未知引擎错误

你遇到的错误是因为Playwright无法识别data-qa=xxx这种写法——这不是Playwright支持的标准选择器语法。要通过data-qa属性定位元素，有两种可行的解决方式：

方式一：使用CSS属性选择器（推荐新手） #

直接用标准的CSS属性选择器格式，把data-qa=xxx替换为[data-qa="xxx"]（方括号包裹属性名，属性值用引号包裹）。修改你的LoginPage类代码如下：

export class LoginPage {
    /**
     * @param {import('@playwright/test').Page} page
     */
    constructor(page) {
      this.page = page;
      // 修正为CSS属性选择器格式
      this.userName = this.page.locator('[data-qa="login-input-email"]');
      this.password = this.page.locator('[data-qa="login-input-password"]');
      this.loginButton = this.page.locator('[data-qa="login-button"]');
    }
  
    async goto() {
      await this.page.goto('https://www.baseurl.com/login');
    }
  
    /**
     * @param {string} text
     */
    async enterUsername(text) {
      await this.userName.fill(text);
    }

    /**
     * @param {string} text
     */
    async enterPassword(text) {
        await this.password.fill(text);
      }

    async clickLoginBtn() {
        await this.loginButton.click();
    }
  }

另外，你的spec文件里调用异步方法时缺少await，这会导致执行顺序混乱，需要一并修正：

// @ts-check
const { test, expect } = require('@playwright/test');

import { LoginPage } from '../../pages/login-page'

const username = 'user@email.com';
const password = 'test123_mcx6bca8CHK.tup';


test.describe('Login', () => {
  
  test('Validates the login', async ({ page }) => {
    
    const loginPage = new LoginPage(page);

    // 所有异步方法调用前添加await
    await loginPage.goto();
    await loginPage.enterUsername(username);
    await loginPage.enterPassword(password);
    await loginPage.clickLoginBtn();
  })
})

方式二：自定义选择器引擎（进阶用法） #

如果不想每次都写[data-qa="xxx"]，可以自定义一个data-qa选择器引擎，让Playwright直接识别data-qa=xxx写法。在测试配置文件（比如playwright.config.js）中添加以下配置：

const { defineConfig } = require('@playwright/test');

module.exports = defineConfig({
  use: {
    // 注册自定义选择器引擎
    selectors: [
      {
        name: 'data-qa',
        // 解析选择器为CSS属性选择器
        parse(root, selector) {
          return root.querySelector(`[data-qa="${selector}"]`);
        },
        // 生成对应的CSS选择器字符串
        query(root, selector) {
          return root.querySelectorAll(`[data-qa="${selector}"]`);
        },
      },
    ],
  },
});

配置完成后，你原来的this.page.locator('data-qa=login-input-email')写法就可以正常使用了。

内容的提问来源于stack exchange，提问作者simpleMan