javascript - 在 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