This is how I'm trying to build my first page object for login testing using WebdriverIO

But I'm getting the error ERROR: Class extends value #<Page> is not a function or null on line 3 of login.page.js.

I don't see, what I'm doing wrong... Is there any path or filename wrong?

/tests/specs/login.specs.js

var expect = require('chai').expect
var LoginPage = require('../pageobjects/login.page')

describe('login form', function () {
  it('should deny access with wrong creds', function () {
    LoginPage.open()
    LoginPage.username.setValue('foo')
    LoginPage.password.setValue('bar')
    LoginPage.submit()
    expect(LoginPage.flash.getText()).to.contain('Your username is invalid!')
  })
})

/tests/pageobjects/page

'use strict'
class Page {
  constructor() {
    this.title = 'My Page'
  }
  open(path) {
    browser.url('/' + path)
  }
}
module.exports = new Page()

/tests/pageobjects/login.page.js

'use strict'
var Page = require('./page')
class LoginPage extends Page {
  get username () { return browser.element('#username') }
  get password () { return browser.element('#password') }
  get form () { return browser.element('#login') }
  get flash () { return browser.element('#flash') }

  open () {
    super.open('login')
  }

  submit () {
    this.form.submitForm()
  }
}
module.exports = new LoginPage()

This is how I'm trying to build my first page object for login testing using WebdriverIO

But I'm getting the error ERROR: Class extends value #<Page> is not a function or null on line 3 of login.page.js.

I don't see, what I'm doing wrong... Is there any path or filename wrong?

/tests/specs/login.specs.js

var expect = require('chai').expect
var LoginPage = require('../pageobjects/login.page')

describe('login form', function () {
  it('should deny access with wrong creds', function () {
    LoginPage.open()
    LoginPage.username.setValue('foo')
    LoginPage.password.setValue('bar')
    LoginPage.submit()
    expect(LoginPage.flash.getText()).to.contain('Your username is invalid!')
  })
})

/tests/pageobjects/page

'use strict'
class Page {
  constructor() {
    this.title = 'My Page'
  }
  open(path) {
    browser.url('/' + path)
  }
}
module.exports = new Page()

/tests/pageobjects/login.page.js

'use strict'
var Page = require('./page')
class LoginPage extends Page {
  get username () { return browser.element('#username') }
  get password () { return browser.element('#password') }
  get form () { return browser.element('#login') }
  get flash () { return browser.element('#flash') }

  open () {
    super.open('login')
  }

  submit () {
    this.form.submitForm()
  }
}
module.exports = new LoginPage()

• javascript
• selenium-webdriver
• ecmascript-6
• webdriver-io

• You're exporting an instance of a class not a class itself – Gerardo Commented Jul 14, 2017 at 22:49
• I don't see the point... – user3142695 Commented Jul 14, 2017 at 22:52
• 1 try module.exports = Page – Gerardo Commented Jul 14, 2017 at 22:53
• Then I'll get ERROR: Class constructors cannot be invoked without 'new' – user3142695 Commented Jul 14, 2017 at 22:56
• 1 And I guess you're getting that in login.specs.js because you need to change also module.exports = new LoginPage() to module.exports = LoginPage and in login.specs.js make an instance of LoginPage. – Gerardo Commented Jul 14, 2017 at 23:01

2 Answers 2

As pointed out by Gerardo, your're exporting an instance of the class and note the class itself. Try these changes:

/tests/pageobjects/page

module.exports = Page;

/tests/pageobjects/login.page.js

module.exports = LoginPage;

/tests/specs/login.specs.js

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

or

var LoginPage = require('../pageobjects/login.page');
var instanceLoginPage = new LoginPage();

Try

module.exports.Page = Page

then in login.page

var Page = require('./page.js').Page