cypressでサーバサイド(node)を実行する方法

cypressでnodeのコマンドを実行したい場面があるかと思います。 cypressはクライアント側で動くプログラムなので、 そのままだとnodeで動かすコードは実行できませんが、 pluginを使うと実行することができます。

pluginの作り方は簡単で、

まず、下記のようにnodeを実行するコマンドを作ります。 cypress/plugins/index.js

// cypress/plugins/index.js
module.exports = (on, config) => {
  on('task', {
    saveDataToDatabase(data) {
      // nodeのコードをここに書きます。
     // たとえば、nodeで行うdatabaseの書き込みだったり、など実行できます。
      console.log(data)
      return null // returnを返さないと怒られます。
    },
  })
}

これでsaveDataToDatabaseのコマンドが作られます。 使い方としてはとても簡単で、taskで下記のように指定してあげるだけです

task("saveDataToDatabase", { foobar: "hogehoge" }) // task("コマンド名", 引数)

全体のコードだと下記のようになります。

describe('My First Test', () => {
  it('Visits the Kitchen Sink', () => {
    cy.visit('https://example.cypress.io')
    task("saveDataToDatabase", { foobar: "hogehoge" 
  }) 
})

また、cypress/plugins/では、nodeで動かすコードのimportももちろんできるので、 クライアントからサーバーサイドにデータを渡したりする時にかなり役立ちます。

本当に便利な機能なので、サーバサイドとの連携が必要な時は使ってみてください。

参考: cypress task#Usage