Skip to content

Instantly share code, notes, and snippets.

@rippo
Last active October 19, 2017 09:32
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rippo/a3aa8052749c6acc4af41b9e7a9de583 to your computer and use it in GitHub Desktop.
Save rippo/a3aa8052749c6acc4af41b9e7a9de583 to your computer and use it in GitHub Desktop.
Page object pattern using chromeless
var AccountLoginPage = function (chromeless, options) {
this.chromeless = chromeless
this.options = options
this.usernameLocator = 'input[id="Username"]'
this.passwordLocator = 'input[id="Password"]'
this.submitButtonLocator = 'form input[type="submit"]'
this.inputWithValidationErrorLocator = 'input.input-validation-error'
this.usernameRequiredValidationLocator = '.field-validation-error[data-valmsg-for="Username"]'
this.passwordRequiredValidationLocator = '.field-validation-error[data-valmsg-for="Password"]'
this.page = '/account'
};
AccountLoginPage.prototype.visit = async function () {
await this.chromeless
.goto(this.options.url + this.page)
.setViewport({ width: 1200, height: 800, scale: 1 })
}
AccountLoginPage.prototype.checkWeAreOnTheAccountPage = async function () {
const href = await this.chromeless
.evaluate(href => window.location.href)
return href.slice(-this.page.length) === this.page
}
AccountLoginPage.prototype.fillInTheUsername = async function (username) {
await this.chromeless
.type(username, this.usernameLocator)
}
AccountLoginPage.prototype.fillInThePassword = async function (password) {
await this.chromeless
.type(password, this.passwordLocator)
}
AccountLoginPage.prototype.submitTheForm = async function () {
await this.chromeless
.click(this.submitButtonLocator)
}
AccountLoginPage.prototype.checkUserNameValidationIsShown = async function () {
return await this.chromeless
.wait(this.inputWithValidationErrorLocator)
.exists(this.usernameRequiredValidationLocator)
}
AccountLoginPage.prototype.checkPasswordValidationIsShown = async function () {
return await this.chromeless
.wait(this.inputWithValidationErrorLocator)
.exists(this.passwordRequiredValidationLocator)
}
AccountLoginPage.prototype.checkUserNameNotFoundIsShown = async function () {
return await this.chromeless
.wait(this.inputWithValidationErrorLocator)
.evaluate(() =>
document.getElementsByClassName('field-validation-error')[0]
.innerHTML === 'User could not be found'
)
}
AccountLoginPage.prototype.fullLogin = async function(username, password) {
this.visit();
this.fillInTheUsername(username)
this.fillInThePassword(password)
this.submitTheForm()
}
module.exports = AccountLoginPage
const { Chromeless } = require('chromeless')
const { expect } = require('chai').use(require('chai-string'))
const AccountLoginPage = require('./account.login.page')
const AccountSearchPage = require('./account.search.page')
const options = require('yargs-parser')(process.argv.slice(2))
describe('When logging in as test1@test.com', function () {
this.timeout(10000)
var chromeless = new Chromeless(/*{debug: true}*/)
var loginPage = new AccountLoginPage(chromeless, options)
var searchPage = new AccountSearchPage(chromeless, options)
it('login as test1@test1.com', async function() {
await loginPage.fullLogin('test1@test.com', 'abc')
})
it('check we are on the search page', async function() {
const ok = await searchPage.checkWeAreOnTheSearchPage("1")
expect(ok).to.be.true
})
it('check validation is show for a blank search', async function() {
await searchPage.submitTheForm()
const ok = await searchPage.checkValidationMessageShown()
expect(ok).to.be.true
})
it ('when we do a search for \'a\' then return 3 rows', async function() {
await searchPage.fillInSearchBox('a')
const resultsCount = await searchPage.getTableResultsLength()
expect(resultsCount).to.equal(3)
})
it ('when we do a search for \'b\' then return 1 rows', async function() {
await searchPage.visit(1)
await searchPage.fillInSearchBox('b')
const resultsCount = await searchPage.getTableResultsLength()
expect(resultsCount).to.equal(1)
})
after(async function () {
const screenshot = await chromeless.screenshot()
console.log('\n Grab: ' + screenshot)
await chromeless.end()
})
})
const { Chromeless } = require('chromeless')
const { expect } = require('chai').use(require('chai-string'))
const AccountLoginPage = require('./account.login.page')
const AccountSearchPage = require('./account.search.page')
const options = require('yargs-parser')(process.argv.slice(2))
describe('When logging in as test2@test.com', function () {
this.timeout(10000)
var chromeless = new Chromeless(/*{debug: true}*/)
var loginPage = new AccountLoginPage(chromeless, options)
var searchPage = new AccountSearchPage(chromeless, options)
it('login as test2@test.com', async function() {
await loginPage.fullLogin('test2@test.com', 'abc')
})
it('check we are on the search page', async function() {
const ok = await searchPage.checkWeAreOnTheSearchPage(2)
expect(ok).to.be.true
})
it ('when we do a search for \'a\' then return 4 rows', async function() {
await searchPage.fillInSearchBox('a')
const resultsCount = await searchPage.getTableResultsLength()
expect(resultsCount).to.equal(4)
})
it ('when we do a search for \'b\' then show no results could be found', async function() {
await searchPage.visit(2)
await searchPage.fillInSearchBox('b')
const noResultsShown = await searchPage.checkNoResultsAlertIsShown()
expect(noResultsShown).contains("Sorry no results could be found")
})
after(async function () {
//const screenshot = await chromeless.screenshot()
//console.log('\n Grab: ' + screenshot)
await chromeless.end()
})
})
const { Chromeless } = require('chromeless')
const { expect } = require('chai').use(require('chai-string'))
const AccountLoginPage = require('./account.login.page')
const options = require('yargs-parser')(process.argv.slice(2))
describe('When trying to login as an unknown user', function () {
this.timeout(10000)
var chromeless = new Chromeless()
var page = new AccountLoginPage(chromeless, options)
it('check we start on the login page', async function () {
page.visit()
const ok = await page.checkWeAreOnTheAccountPage()
expect(ok).to.be.true
})
it('when submitting a blank form check username required validation is shown', async function() {
await page.submitTheForm()
const ok = await page.checkUserNameValidationIsShown()
expect(ok).to.be.true
})
it('when submitting a blank form check password required validation is shown', async function() {
//await page.submitTheForm() //Do we need this?
const ok = await page.checkPasswordValidationIsShown()
expect(ok).to.be.true
})
it ('when submitting a invalid user check that the unknown user message is displayed', async function() {
page.visit() //clears the validation!
await page.fillInTheUsername('unknown@test.com')
await page.fillInThePassword('abc')
await page.submitTheForm()
const ok = await page.checkUserNameNotFoundIsShown()
expect(ok).to.be.true
})
after(async function () {
const screenshot = await chromeless.screenshot()
console.log('\n Grab: ' + screenshot)
await chromeless.end()
})
})
@rippo
Copy link
Author

rippo commented Oct 6, 2017

I run it using command and get the following results

mocha test.login.* --url=http://192.168.200.6:43504

2017-10-06_14-42-16

@wujku
Copy link

wujku commented Oct 19, 2017

Could you add example of account.search.page.js?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment