【Nuxt.js】Cypressで商用ビルド時のみカスタムデータ属性を削除する方法

本日はE2EテストツールCypressについて記載します。

はじめに。

CypressのようなE2Eテストではクリックや文字列取得時など、要素を指定する機会が多々あります。
その際にクラスやidで指定することも可能ですが、
公式ドキュメントではベストプラクティスとしてhtmlに「data-cy」というdata属性をつけるようドキュメントに記載されています。

例）

<h1 data-cy="title">hogehoge</h1>

ドキュメントで実際に記載されている箇所はこちらです。
https://docs.cypress.io/guides/references/best-practices#Selecting-Elements

E2Eテストはローカル環境やステージング環境で実施する運用になるかと思うので、商用環境ではdata属性が不要となります。
（もちろん記載されていても問題はないのですが...）
そのため今回はNuxt.js使用時、商用環境ビルド時のみ「data-cy」を取り除く方法についてまとめたいと思います。

具体的な手順

では早速具体的な手順ですが、以下のプラグインを使用すれば商用時のみカスタムデータを消すことが可能となっています。
https://github.com/RobustaStudio/nuxt-test-attrs

①プラグインをインストール

# yarn もしくは npm　でインストール
yarn add nuxt-test-attrs
npm i nuxt-test-attrs

②nuxt.config.js内のbuildModulesに追記する。

{
    buildModules: [
        'nuxt-test-attrs',
    ],
}

③nuxt.config.jsに以下を追記する。

{
    testAttrs: {
        attrs: ['cy'],
        strip: process.env.NODE_ENV === 'production',
    },
}

attrsには削除したいdata属性を記入します。
data-の部分は省略し、data-*の部分を記入してください。
今回はdata-cyを削除する流れのため、cyを指定です。

stripには商用ビルドの環境変数を指定してください。

終わりに。

上記で以上になります。
意外と簡単にできたのではないでしょうか。

data-cy以外にもdata-testなど他のdata属性を消すことができるので、よろしければ試してみてください。