Playwright - Javascript - Page Object - TypeError: page.$(...).toBeVisible is not a function

Question

good morning. I'm facing the next issue below:

TypeError: page.$(...).toBeVisible is not a function

The line in question --> await expect(await page.$(homeIcon()).toBeVisible())

This is the login-page.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 };

Below is my 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()
});

By the way, this is my 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"
  }
}

Can anobody help me with this? Thanks in advance!!!

Jaky Ruby · Accepted Answer · 2022-10-30 18:02:58Z

0

In the expect docs I do not see any toBeVisible function.

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

Maybe you want to try this: https://playwright.dev/docs/test-assertions

But you need to import different lib:

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

As you can see here: https://jestjs.io/docs/expect

answered Oct 30, 2022 at 18:02

Jaky Ruby

1,6941 gold badge9 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Vishal Aggarwal · Accepted Answer · 2023-09-15 05:27:18Z

0

The use of ElementHandle(page.$()) is discouraged, use Locator objects and web-first assertions instead.

You need to use locator with toBeVisible .

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

edited Sep 15, 2023 at 5:27

answered Oct 31, 2022 at 21:38

Vishal Aggarwal

1

Collectives™ on Stack Overflow

Playwright - Javascript - Page Object - TypeError: page.$(...).toBeVisible is not a function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related