CypressコンポーネントテストとJavaScriptの手順

This page is not available in the language you requested. You have been redirected to the English version of the page.

Link to this page copied to clipboard

CypressとJavaScriptでコンポーネントテストを設定する

Not for use with personal data

テストフォルダーのルートレベルで、@axe-core/watcherパッケージとそのすべての依存関係をnpmまたはお好みのパッケージマネージャー（例えば、yarnあるいはpnpm）を使用してインストールします。
```
npm install --save-dev @axe-core/watcher
```

cypress.config.jsでは、 cypressConfig() の関数をインポートし、それで設定をラップします。 @axe-core/watcher 配列に以下を含めます: testingTypes component:

const { defineConfig } = require('cypress');
const { cypressConfig } = require('@axe-core/watcher/cypress/config');

const ACCESSIBILITY_API_KEY = process.env.ACCESSIBILITY_API_KEY
const PROJECT_ID = process.env.PROJECT_ID

module.exports = defineConfig(  
  cypressConfig({
    axe: {
      apiKey: ACCESSIBILITY_API_KEY,
      projectId: PROJECT_ID,
      testingTypes: ['component']
    },
    // Your existing Cypress configuration code here
    component: {
      // Your component testing configuration
      
      // For example:
      
      // devServer: {
      //  framework: 'react',
      //  bundler: 'webpack',
      //},
    },
  })
);

必ず、ACCESSIBILITY_API_KEYとPROJECT_IDを環境に設定し、あなたの個人用APIキー（AxeアカウントのAPI KEYSタブにあります）とプロジェクトID（プロジェクト作成時のこの手順の上部に表示されるか、プロジェクトページで設定の下にあるプロジェクトを設定を選択することで確認可能です）を使用してください。

Cypressコンポーネントサポートファイル（通常は cypress/support/component.jsと呼ばれる）では、 @axe-core/watcher パッケージをインポートし、 cypressCommands 各テストの後に axeWatcherFlush() を呼び出します:
```
require('@axe-core/watcher/cypress/support');

afterEach(() => {
  cy.axeWatcherFlush();
});
```
これで完了です。コンポーネントテストを実行し、結果を確認してください。次の点に注意してください。 @axe-core/watcher はテスト用ChromeまたはChromiumでのみ実行され、Cypressのランモードでのみ使用するべきです。これを --headless=new や --headed で使用することができます（例えば、 cypress run --headed --browser=chrome-for-testing --component）。

CypressコンポーネントテストとJavaScriptの手順

Is this page helpful?

Help us improve this page

Still need help?