sitateru tech blog: ESLint

sitateru tech blog

シタテルの技術やエンジニアの取り組みを紹介するテックブログです。

ラベル ESLint の投稿を表示しています。 すべての投稿を表示
ラベル ESLint の投稿を表示しています。 すべての投稿を表示

2020年3月19日木曜日

Cypress on GitHub Actions のいろいろなテクニック

3月 19, 2020
朝野です。
先日CypressとGitHubを使う記事を書いたのですが、今回はもう少し突っ込んだ話として、ActionsでCypressを使う上で引っかかったところなどをまとめてみたいと思います。

Cypressのテストが止まったままになる??

Dockerコンテナ上でCypress(ブラウザはChrome)を実行していると途中で止まってしまうことがあります。
調べてみたところChromeの共有メモリが足りなくなっているようです。
そんなときは cypress/plugin/index.js にこの記述で直りました。
module.exports = (on, config) => {
  on('before:browser:launch', (browser, launchOptions) => {
    if (browser.name === 'chrome') {
      launchOptions.args.push('--disable-dev-shm-usage')
    }
    return launchOptions
  })
}
Chromeの起動時に --disable-dev-shm-usage オプションをつけているのですが、これによって共有メモリファイルを /tmp 以下に配置するので充分な容量が確保できるということだそうです。

:hover

CypressにはCSSの:hover状態を発生させる機能が無いようです🙄
hover | Cypress Documentation
If cy.hover() is used, an error will display and redirect you to this page.
Cypressでは非表示状態の要素はクリックなどの操作ができないのですが、じゃあ:hover時に表示される要素をクリックしたいときはどうするの?という話になりますね。
上記のドキュメントでは
cy.get('.hidden').invoke('show').click()
cy.get('.hidden').click({ force: true })
という方法が紹介されています。
ちょっと試したところ invoke('show') はうまくいかなかったのですが click({ force: true }) はできたので、これでいいかなということにしました。

XPath

ページに表示されているテキストを検索して要素を選択したいときなどにはXPathを使いたくなりますが、その場合はプラグインを追加するという方法になります。
package.jsonに cypress-xpath を追加し、cypress/support/index.js に
require('cypress-xpath')
と1行加えればOKです。
cy.xpath('//div[contains(text(), "ここをクリック")]') のように要素を取得できます。

ESLint

ESLintを使っている場合、Cypressのコードはそのままだと引っかかってエラーが出てしまいます。
そんなときはlintのcypressプラグインを使いましょう。
eslint-plugin-cypress を追加し、cypress/.eslintrc.jsonを作成します。
最低限の設定をするならこんなもんです。
{
  "plugins": [
    "cypress"
  ],
  "env": {
    "cypress/globals": true
  },
  "extends": [
    "plugin:cypress/recommended"
  ]
}

Cypressだけインストールする

これはCypressではなくnpmのテクニックなのですが、Actions内でCypressを実行するだけなら、Cypress以外のnpmパッケージをインストールする必要はないですよね。
package.jsonやpackage-lock.jsonの中身を無視してCypressだけインストールするならこうする手もあります。

$ npm install cypress@4.1.0 --no-save --no-package-lock
npm-install | npm Documentation

本当はnode_modulesをキャッシュしたいんですが、
依存関係をキャッシュしてワークフローのスピードを上げる - GitHub ヘルプ
によると
pull_requestのclosedイベントの場合を除く、push及びpull_requestイベントで起動されたワークフロー内のキャッシュにのみアクセスできます。
ということなので、スケジュール実行だとできないのです・・・



というわけで、CypressとActions関係のさまざまなTipsを書いてみました。
何かの参考になれば幸いです。