Open4

CodeceptJS探り

maruwaremaruware

Custom Helperをやってみる

$ yarn codeceptjs gh
Creating a new helper
--------------------------
? Name of a Helper HogeHelper
? Where should it be stored ./hoge_helper.js

以下が吐かれる。

const Helper = require('@codeceptjs/helper');

class HogeHelper extends Helper {

  // before/after hooks
  /**
   * @protected
   */
  _before() {
    // remove if not used
  }

  /**
   * @protected
   */
  _after() {
    // remove if not used
  }

  // add custom methods here
  // If you need to access other helpers
  // use: this.helpers['helperName']

}

module.exports = HogeHelper;

ts化する。

import Helper from '@codeceptjs/helper'

class HogeHelper extends Helper {
  // before/after hooks
  /**
   * @protected
   */
  _before() {
    // remove if not used
  }

  /**
   * @protected
   */
  _after() {
    // remove if not used
  }

  // add custom methods here
  // If you need to access other helpers
  // use: this.helpers['helperName']
}

export = HogeHelper

helloメソッドを追加してみる。

import Helper from '@codeceptjs/helper'

class HogeHelper extends Helper {
  // before/after hooks
  /**
   * @protected
   */
  _before() {
    // remove if not used
  }

  /**
   * @protected
   */
  _after() {
    // remove if not used
  }

  hello() {
    console.log('hello')
  }

  // add custom methods here
  // If you need to access other helpers
  // use: this.helpers['helperName']
}

export = HogeHelper

codecept.conf.js にhelperを追加。

codecept.conf.js
exports.config = {
  // ...
  helpers: {
    HogeHelper: {
      require: './hoge_helper.ts',
    },
  },
}

yarn codeceptjs def を実行するとsteps.d.tsが吐かれて、テスト内で

I.hello()

のように型が通る。

maruwaremaruware

PuppeteerでDOMにアクセスする

CodeceptJS.Puppeteerの型定義がおかしいので独自型にしておく
_locateでelementを取得したあとはPuppeteerのElementHandleになるのでPuppeteerのdocに従って色々する。

import { ElementHandle } from 'puppeteer'

interface Puppeteer {
  _locate(locator: CodeceptJS.LocatorOrString): Promise<ElementHandle[]>
}

class HogeHelper extends Helper {
  helpers: {
    Puppeteer: Puppeteer
  }
  async fuga(locator) {
    const { Puppeteer } = this.helpers
    const els = await Puppeteer._locate(locator)

    const el = els[0]
    const o  = await el.getProperty('srcObject')
    o.evaluate(e => {
      // ...
    })
  }
}