Playwright - Javascript - CucumberJs - Click and Fill methods fail

Question

I'm working with Playwright, cucumber and Javascript. I'm facing the next issues below:

  page.type: selector: expected string, got object
  page.click: selector: expected string, got function

And many similar error messages.

this is the profile.cjs class, where the data is located:

const wrongEmailFormat = 'eyftqeiuyfqwiyfiwqfywqgfywqguddwqguy'
const existingEmail = 'amalg12@gmail.com'


module.exports = { wrongEmailFormat , existingEmail };

This is my profile-page.cjs:

const { secondaryUrl } = require("../config.cjs");
const { wrongEmailFormat , existingEmail } = require("../data/profile.cjs")
const should = require('chai').should(); //Chai assertion

const delay = ms => new Promise(resolve => setTimeout(resolve, ms))
const profileTitle = async () => await page.$('//h2[contains(text(),\'My Profile\')]')
const communicationTab =  async () => await page.$('//button[@id=\'headlessui-tabs-tab-:R5l6:\']')
const currentEmail = async () => await page.$('#current-email')
const updateEmail = async () => await page.$('#cla9ruxam000w3b630t1c9dl4')


class ProfilePage {

  async navigateToProfilePage() {
    await page.goto(secondaryUrl)
    await delay(2000)
  }

  async profilePageDisplayed() {
    should.exist(profileTitle)
  }

  async communicationTabDisplayed() {
    should.exist(communicationTab)
  }

  async currentEmailFieldDisplayed(){
    should.exist(currentEmail)
  }


  async updateEmailFieldDisplayed(){
    should.exist(updateEmail)
  }

  async updateEmailWrongFormat(){
    //await page.keyboard.press(updateEmail().type(wrongEmailFormat))
    //await updateEmail().click()
    //await page.click(updateEmail, { force: true })
    //await page.fill(wrongEmailFormat).toString()
    //await page.waitFor(updateEmail())
    //await page.click(updateEmail, { force: true }).toString()
    //await page.fill(updateEmail(), wrongEmailFormat).toString()
    //await page.dispatchEvent(updateEmail()).click
    //await updateEmail().keys(wrongEmailFormat)
    //await delay(3000)
  }

}

module.exports = { ProfilePage };

updateEmailWrongFormat is all with comments, because I have tried in many ways, but without success.

Could anybody help me with this, please?

Answer 1

The error was the next:

All the selectors included in the profile-page were using the "WebdriverIO" format, so I did the next:

1.- Take all the selectors and move them to a new folder(selectors) inside a new class: profile-selectors with the next format:

module.exports = {

    profileTitle: '//h2[contains(text(),\'My Profile\')]',
    communicationTab: '//button[@id=\'headlessui-tabs-tab-:R5l6:\']',
    currentEmail:'#current-email',
    updateEmail:'//html[1]/body[1]/div[1]/div[1]/div[2]/main[1]/div[1]/div[2]/' +
                'div[2]/div[1]/div[1]/div[1]/div[1]/div[1]/div[1]/input[1]'
};

After this, import in the Page object class and use them:

const { profileTitle, communicationTab, currentEmail, updateEmail} = require('../selectors/profile-selectors')

I know there are many xpaths, but much of the webelements do not have identifiers, or any others are dynamic elements.