E2E test

March 26, 2019

Page Objects Pattern

通常會攥寫兩類檔案:

  1. page.js: 將一些供整個專案使用的底層 API 在此封裝,各個 xx.page.js 會繼承該 page.js
  2. xx.page.js: 特定頁面,定義該頁的屬性(頁面上元素)與方法

Example

CodeceptMixin 相當於 page.js
SPHelper 相當於 xx.page.js

class SPHelper extends CodeceptMixin(ECHelper) {
  constructor (config) {
    super(config)
    this.SPCookie = null

    // setup account storage
    let mockStorage = null
    if (this._isOSX()) {
      const MOCK_SHP_PL_HEADLESS_PWD = process.env.MOCK_SHP_PL_HEADLESS_PWD
      mockStorage = {
        [SHP_HEADLESS_SHP_PL_ID]: MOCK_SHP_PL_HEADLESS_PWD
      }
    }
    this.setupAccountStorage({ [SHP_HEADLESS_SHP_PL_ID]: '' }, mockStorage)
    this.createTestFiles()
  }

    // 方法
  setSPCookie (cookies, isLoginAccount) {
    const expirationDelay = 3 * 3600 * 1000
    const futureTime = `${Date.now()}${expirationDelay}`
    const browser = this._browser()
    const baseUrl = options.url || options.baseUrl
    const parsedURL = URL.parse(baseUrl)
    const secure = (parsedURL.protocol === 'https:')

    let localCookies = _.filter(cookies, c => !_.isEmpty(c.value))
    localCookies.push(mockOktaAtCookie)

    const getCookie = function (name) {
      const cookie = _.find(localCookies, { name })
      const value = _.get(cookie, 'value', '')
      const ret = {
        name: name,
        value: value,
        path: '/',
        domain: domain,
        secure: secure,
        expiry: futureTime
      }

      return ret
    }

    const cookiesTobeSet = _.map(cookies, (cookie) => {
      return getCookie(cookie.name)
    })

    if (this._isNightmare()) {
      return browser
        .goto(LOGIN_URL)
        .cookies.set(cookiesTobeSet)
    } else if (this.isIE()) {
      // grabCookie, seeCookie, setCookie will cause IE crash, bypass them
      return Promise.resolve()
    }

    return browser.url(baseUrl + '/error?SET_COOKIE_URL')
      .setCookie(getCookie(spCookieKey))
      .setCookie(getCookie(secretDashboardCookieKey))
      .setCookie(getCookie(oktaAtCookieKey))
      .setCookie(getCookie(oktaItCookieKey))
  }

  async loginAsOktaHeadless () {
      // ...
  }

    // 方法
  async loginAsShpPl (simulatedId) {
    await this.loginAsOktaHeadless()
    return this.loginSupplierPortalAsShpPl(SHP_HEADLESS_SHP_PL_ID, simulatedId)
      .then((cookies) => {
        return this.setSPCookie(cookies)
      })
  }


}

目前目前的 E2E 測試工具有哪些?

WebDriverIO 測試撰寫 pattern

Page Objects Pattern on WebDriverIO - Eden Liujj


Profile picture

Written by YU-HSIN, CHEN,
Front-end Engineer at PayPay Corporation.,
Loves pursuing modern web development.Find me on LinkedIn