朝野です。
先日CypressとGitHubを使う記事を書いたのですが、今回はもう少し突っ込んだ話として、ActionsでCypressを使う上で引っかかったところなどをまとめてみたいと思います。
調べてみたところChromeの共有メモリが足りなくなっているようです。
そんなときは cypress/plugin/index.js にこの記述で直りました。
Chromeの起動時に
hover | Cypress Documentation
上記のドキュメントでは
という方法が紹介されています。
ちょっと試したところ
package.jsonに cypress-xpath を追加し、cypress/support/index.js に
と1行加えればOKです。
そんなときはlintのcypressプラグインを使いましょう。
eslint-plugin-cypress を追加し、cypress/.eslintrc.jsonを作成します。
最低限の設定をするならこんなもんです。
package.jsonやpackage-lock.jsonの中身を無視してCypressだけインストールするならこうする手もあります。
npm-install | npm Documentation
本当はnode_modulesをキャッシュしたいんですが、
依存関係をキャッシュしてワークフローのスピードを上げる - GitHub ヘルプ
によると
というわけで、CypressとActions関係のさまざまなTipsを書いてみました。
何かの参考になれば幸いです。
Cypress
,
ESLint
,
GitHub Actions
先日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
})
}
--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')
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を書いてみました。
何かの参考になれば幸いです。