在 webdriver.io 中创建页面对象有错误。setValue 不是函数/无法读取未定义的属性“setValue”

Question

我正在创建一个带有页面对象文件 (login.po.js) 和测试规范文件 (test.spec.js) 的 webdriver.io 自动化，但是当我使用它时它似乎无法识别该对象在测试规范文件（test.spec.js）上调用它，它会显示错误LoginPage.username.setValue is not a function。

下面是我的代码：

login.po.js

    var LoginPage =  {

    username: { get: function () { return $('#email'); } },
    password: { get: function () { return $('#password'); } },
    form:     { get: function () { return $('#login'); } },
    flash:    { get: function () { return $('#flash'); } },

    submit: { value: function() {
        this.form.click();
    } }
};
module.exports = LoginPage;

test.spec.js

var LoginPage = require('../page/login.po');

const userObj = {
    user: 'username@email.com',
    password: 'password',
}
var assert = require('assert');


describe('login form', () => {

    it('should deny access with wrong creds', function () {
        LoginPage.username.setValue('username');
        LoginPage.password.setValue('password');
        LoginPage.submit();
        browser.pause(5000);
        expect(LoginPage.flash.getText()).to.contain('Your username is invalid!');
    });

    it('should allow access with correct creds', function () {
        LoginPage.username.setValue(userObj.user);
        LoginPage.password.setValue(userObj.password);
        LoginPage.submit();
        browser.pause(5000);
        expect(LoginPage.flash.getText()).to.contain('You logged into a secure area!');
    });
});

运行时出现的错误是：

 1) login form should deny access with wrong creds
 LoginPage.username.setValue is not a function
 TypeError: LoginPage.username.setValue is not a function
     at Context.<anonymous> (D:\MyTest00\specs\test.spec.js:31:28)
     at Context.executeSync (D:\MyTest00\node_modules\@wdio\sync\build\index.js:56:18)
     at D:\MyTest00\node_modules\@wdio\sync\build\index.js:82:70

 2) login form should allow access with correct creds
 LoginPage.username.setValue is not a function
 TypeError: LoginPage.username.setValue is not a function
     at Context.<anonymous> (D:\MyTest00\specs\test.spec.js:45:28)
     at Context.executeSync (D:\MyTest00\node_modules\@wdio\sync\build\index.js:56:18)
     at D:\MyTest00\node_modules\@wdio\sync\build\index.js:82:70

非常感谢您的帮助，如果您还发现我的代码有其他问题，请协助我更正，非常感谢

---

更改login.po.js中的最后一行代码

exports.LoginPage = LoginPage;

显示错误：

  1) login form should deny access with wrong creds
  Cannot read property 'setValue' of undefined
  TypeError: Cannot read property 'setValue' of undefined
      at Context.<anonymous> (D:\MyTest00\specs\test.spec.js:20:28)
      at Context.executeSync (D:\MyTest00\node_modules\@wdio\sync\build\index.js:56:18)
      at D:\MyTest00\node_modules\@wdio\sync\build\index.js:82:70

  2) login form should allow access with correct creds
  Cannot read property 'setValue' of undefined
  TypeError: Cannot read property 'setValue' of undefined
      at Context.<anonymous> (D:\MyTest00\specs\test.spec.js:28:28)
      at Context.executeSync (D:\MyTest00\node_modules\@wdio\sync\build\index.js:56:18)
      at D:\MyTest00\node_modules\@wdio\sync\build\index.js:82:70

---

编辑test.spec.js中的第一行代码：

var LoginPage = require('../page/login.po').LoginPage

仍然显示错误：

  1) login form should deny access with wrong creds
  LoginPage.username.setValue is not a function
  TypeError: LoginPage.username.setValue is not a function
      at Context.<anonymous> (D:\MyTest00\specs\test.spec.js:31:28)
      at Context.executeSync (D:\MyTest00\node_modules\@wdio\sync\build\index.js:56:18)
      at D:\MyTest00\node_modules\@wdio\sync\build\index.js:82:70

  2) login form should allow access with correct creds
  LoginPage.username.setValue is not a function
  TypeError: LoginPage.username.setValue is not a function
      at Context.<anonymous> (D:\MyTest00\specs\test.spec.js:45:28)
      at Context.executeSync (D:\MyTest00\node_modules\@wdio\sync\build\index.js:56:18)
      at D:\MyTest00\node_modules\@wdio\sync\build\index.js:82:70

---

完整代码的 github 存储库是：github.com/seanray7/pageobject-webdriverio

Answer 1

规范文件

const LoginPage = require('../page/login.po').LoginPage;
const userObj = {
    user: 'username@email.com',
    password: 'password',
}
const assert = require('assert');
const expect = require('chai').use(require('chai-as-promised')).expect;


describe('login form', () => {

    it('should have the right title ', async ()=> {
        await browser.url('http://the-internet.herokuapp.com/login');
        // expect(browser.getTitle()).to.eventually.equal('The Internet');
        let title = await browser.getTitle();
        console.log(title);
       return assert.equal(title, 'The Internet');
    });
    it('should deny access with creds', ()=> {
       return LoginPage.LoginPageLibs.Login(userObj.user,userObj.password);   
    });
});

页面文件

const LoginPageLocator = {

    username: '#username',
    password: '#password',
    form: '//i[contains(text(),"Login")]',
    flash: '#flash'

};

const LoginPageLibs = {
    Login : async (username, password) => {
        let name_ele = await browser.$(LoginPageLocator.username);
       await name_ele.setValue(username);
        let password_ele = await browser.$(LoginPageLocator.password);
       await password_ele.setValue(password);
        let sumbit = await browser.$(LoginPageLocator.form)
       return sumbit.click();
    },
    getText:async(elem)=>{
        let element = await browser.$(elem);
        return element.getText();
    }
}

exports.LoginPage = {LoginPageLocator,LoginPageLibs};

参考这个成功运行的截图。

Github - https://github.com/Bharath-Kumar-S/Wdio_sample.git