E2E

showtime

PROTRACTOR

Test framework.

Interact with your app as a user would.

  • angular default e2e testing
  • angular-cli integration
  • better integration (no sleeps!)
  • community

Status

https://circleci.com/gh/yoigo-thor/frontend/31237

Talk is cheap

 

 

 

 

 

 

 

 

 

show me the code

Screen size

prevent undefined layout due responsive

browser
  .driver
  .manage()
  .window()
  .setSize(1280, 1024)

Page objects

  • resilient to changes
  • concern separation
  • readability
  • maintainability

Async-await

simplify promises

wait for *

  • ExpectedConditions API

  • no sleeps!

waitUntilReady() {
    return browser.wait(
      ExpectedConditions
        .visibilityOf(element(by.css(this.readyElement))),
      15000
    )
}

data-hook

  • resilient to changes
  • semantic info
  readyElement = '[data-hook="ready"]'
  title = '[data-hook="title"]'
  mobileData = '[data-hook="mobiledata"]'

  readyElement = '.left-content thor-button'
  title = 'thor-tariff-landing h1'
  mobileData = '.tariff-info .overview-list li:first-child strong'

before

after

by.addLocator('dataHook', (hook, optParentElement, optRootSelector) => {
  const using = optParentElement || 
                document.querySelector(optRootSelector) || 
                document;

  return using.querySelector('[data-hook=\'' + hook + '\']');
});

// ...

readyElement = 'readyElement'

element(by.dataHook(this.readyElement))

Custom locators

suites!

  • run specific set of specs

  • paralelize!

ng e2e --suite=tariffdetail
protractor protractor.conf.js --suite tariffdetail
// protractor.conf.js
{ 
 ...
 suites: {
    regresion: ['e2e/regresion/**/*.e2e-spec.ts'],
    slow: ['e2e/slow/**/*.e2e-spec.ts'],
    main: ['e2e/main/**/*.e2e-spec.ts'],
    ...
    tariffs: ['e2e/tariffs/**/*.e2e-spec.ts'],
    checkout: ['e2e/checkout/**/*.e2e-spec.ts'],
    checkoutv2: ['e2e/checkoutv2/**/*.e2e-spec.ts'],
  },
  ...
}

GREP!

  • run specific set of specs

  • regex filter

protractor protractor.conf.js --grep #sanity
describe('For any test suite', () => {

  it(
    'you can filter with grep by #several #tags #names'
    , () => {}
  )

})

feature flags

  • skip some steps
  • faster runs

https://dev.thor-dev.com/?featureFlag=fmcCheckout,autoFillForm,allCheckoutOpen

RECAP

  • screen size
  • page object pattern
  • async/await
  • waitFor* > sleep
  • data-hook / custom locators
  • suites/grep
  • feature flags

No test, no PaRty

Questions?

https://github.com/anthanh/angular-e2e-workshop/commits/master

THANKS!

anthanh@etereo.io