Playwright - Javascript - 页面对象 - TypeError：page.$(...).toBeVisible 不是函数

Question

早上好。我面临下面的下一个问题：

TypeError：page.$(...).toBeVisible 不是函数

有问题的行 -->

await expect(await page.$(homeIcon()).toBeVisible())

这是登录页面.js：

const {expect} = require("@playwright/test");
const delay = ms => new Promise(resolve => setTimeout(resolve, ms))
const pageTitle = async () => await page.$('//h2[contains(text(),\'My Profile\')]')
const homeIcon =  async () => await page.$('//body/div[@id=\'__next\']/div[1]/div[1]/div[2]/div[1]')
const HomeTitle = async () => await page.$('//h2[contains(text(),\'Pre-Owned Activation\')]')

class LoginPage {

    
    async navigateToHomePage(){
        await page.goto('http://XX.XXX.XXX.51/')
        await delay(2000)
    }

    async verifyHeaderIconHome(){
        await expect(await page.$(homeIcon()).toBeVisible())
    }
async verifyTitle(){
        await expect(page.$(HomeTitle)).toBeVisible()
    }
}

module.exports = { LoginPage };

下面是我的login-step.js

const { Given, When, Then } = require('@cucumber/cucumber');
const { LoginPage } = require('../page-objects/login-page')
const loginPage = new LoginPage()


Given('I navigate to the page', async function () {
    await loginPage.navigateToHomePage()

});
When('I can see the header icon Home', async function () {
    await loginPage.verifyHeaderIconHome()

});
Then('I am logged in the Onstar page', async function () {
    await loginPage.verifyTitle()
});

顺便说一下，这是我的package.json：

{
  "name": "example-playwright",
  "version": "1.0.0",
  "description": "E2E Automation Framework",
  "main": "index.js",
  "scripts": {
    "allure:generate": "npx allure generate ./allure-results --clean",
    "allure:open": "npx allure open ./allure-report",
    "allure:serve": "npx allure serve",
    "test": "./node_modules/.bin/cucumber-js --require cucumber.js --require step-definitions/**/*.js --require features/**/*.js",
    "posttest": "npm run allure:generate",
    "allure": "allure serve reports/allure-results"
  },
  "author": "RGM",
  "license": "ISC",
  "dependencies": {
    "@cucumber/cucumber": "^8.7.0",
    "chai": "^4.3.6",
    "prettier": "^2.7.1"
  },
  "jest": {
    "verbose": true,
    "moduleDirectories": [
      "node_modules",
      "src"
    ],
    "preset": "ts-jest/presets/js-with-ts",
    "testEnvironment": "node",
    "allowJs": true,
    "transform": {
      "^.+\\.jsx?$": "babel-jest"
    },
    "transformIgnorePatterns": [
      "<rootDir>/node_modules/(?!variables/.*)"
    ]
  },
  "devDependencies": {
    "@babel/core": "^7.19.6",
    "@babel/preset-env": "^7.19.4",
    "@playwright/test": "^1.27.1",
    "@testing-library/jest-dom": "^5.16.5",
    "allure-commandline": "^2.18.1",
    "babel-jest": "^29.2.2",
    "experimental-allure-playwright": "^0.0.3",
    "jest": "^29.2.2",
    "playwright": "^1.27.1"
  }
}

有人可以帮我吗？预先感谢！

Answer 1

在预期文档中我没有看到任何 toBeVisible 函数。

https://github.com/playwright-community/expect-playwright

也许你想尝试这个：https://playwright.dev/docs/test-assertions

但是你需要导入不同的库：

import {expect, jest, test} from '@jest/globals';

正如您在这里看到的：https://jestjs.io/docs/expect

Answer 2

您需要将 定位器 与

toBeVisible

一起使用。

不推荐使用“$”。

const homeIcon= '//body/div[@id=\'__next\']/div[1]/div[1]/div[2]/div[1]'
const homeIcon = this.page.locator(homeIcon) //locator
await expect(homeIcon).toBeVisible();