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

Question

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

下面是我的代码：

登录.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: '[e-mail]',
    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

标签： javascriptseleniummocha.jswebdriver-iowebautomation

Answer 1

规格文件

const LoginPage = require('../page/login.po').LoginPage;
const userObj = {
    user: '[e-mail]',
    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