Playwright - Javascript - CucumberJs - Click and Fill 方法失败答案

【问题标题】：Playwright - Javascript - CucumberJs - Click and Fill methods failPlaywright - Javascript - CucumberJs - Click and Fill 方法失败
【发布时间】：2022-11-13 07:15:38
【问题描述】：

我正在与剧作家、黄瓜和 Javascript 合作。我面临以下问题：

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

以及许多类似的错误信息。

这是配置文件.cjs类，数据所在的位置：

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


module.exports = { wrongEmailFormat , existingEmail };

这是我的个人资料页面.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都是cmets，因为我尝试了很多方法，但没有成功。

有人可以帮我解决这个问题吗？

【问题讨论】：

标签： javascript playwright

【解决方案1】：

错误是下一个：

中包含的所有选择器个人资料页正在使用“WebdriverIO”格式，所以我做了下一个：

1.- 获取所有选择器并将它们移动到新类中的新文件夹（选择器）：配置文件选择器使用以下格式：

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]'
};

在此之后，导入 Page 对象类并使用它们：

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

我知道有很多 xpath，但大部分 web 元素没有标识符，或者任何其他元素都是动态元素。

【讨论】：