一番簡単な Cypress テスト

一番簡単な Cypress テストを試す。

テスト対象はこれ Vite + React + TypeScript Hello, World! を使用します。

npm install cypress --save-dev

./cypress.config.js を用意:

import { defineConfig } from 'cypress';

export default defineConfig({
  e2e: {
    browser: 'chrome',
    baseUrl: 'http://localhost:8000',
    specPattern: 'cypress/**/*.cy.ts',
    video: false,
  },
});

See for more details: https://docs.cypress.io/app/references/configuration

空のファイル cypress/support/e2e.js を作成:

mkdir -p cypress/support
touch cypress/support/e2e.js

cypress/test/div.cy.ts を用意:

mkdir cypress/test
touch cypress/test/div.cy.ts

内容は次の通り:

describe('div', () => {
  it('hello world', () => {
    cy.visit('/')
    cy.get('div').should('contain.text', 'Hello, World!')
  })
});

./src/App.tsx を確認:

function App() {
  return (
    <div>Hello, World!</div>
  );
}

export default App;

テストを実行・・・その前にまず React を起動:

npm run dev

テストを実行:

npx cypress run

複雑なテスト

./src/App.tsx:

function App() {
  return (
    <ul>
      <li>Pikachu</li>
      <li>Eevee</li>
      <li>Pidgeot</li>
    </ul>
  );
}
...

このようなポケモンリストがあったとして、先頭が Pikachu であることをテストする:

touch cypres/test/pokemons.cy.ts

pokemons.cy.ts:

describe('pokemons', () => {
  it('pikachu', () => {
    cy.visit('/')
    cy.get('li').first().should('contain.text', 'Pikachu')
  })
});

npx cypress run を実行してテストがパスするか確かめます。

二番目三番目はどうやって確認するのか？

これ:

describe('pokemons', () => {
  it('pikachu', () => {
    cy.visit('/')
    cy.get('li').eq(0).should('contain.text', 'Pikachu')
    cy.get('li').eq(1).should('contain.text', 'Eevee')
    cy.get('li').eq(2).should('contain.text', 'Pidgeot')
  })
});

npx cypress run を実行してテストがパスするか確かめます。

filter

https://docs.cypress.io/api/commands/filter

./src/App.tsx が次のような場合:

function App() {
  return (
    <>
      <ul>
        <li><label><input type="radio"/>Pikachu</label></li>
        <li><label><input type="radio"/>Eevee</label></li>
        <li><label><input type="radio"/>Pidgeot</label></li>
      </ul>
      <ul>
        <li><label><input type="radio"/>Pikachu</label></li>
        <li><label><input type="radio"/>Eevee</label></li>
        <li><label><input type="radio"/>Pidgeot</label></li>
      </ul>
    </>
  );
}

ここで最初の Eevee のラジオボタンをクリックするには？

cypress/test/pokemons.cy.ts を次のように記述:

describe('pokemons', () => {
  it('pikachu', () => {
    cy.visit("/")
    cy.get('label').filter(':contains("Eevee")').children('input').first().click();
  });
});

Eevee がチェックされているかをテストするには？

describe('pokemons', () => {
  it('pikachu', () => {
    cy.visit("/")
    cy.get('label').filter(':contains("Eevee")').children('input').first().click();
    cy.get('label').filter(':contains("Eevee")').children('input').first().should("be.checked");
  });
});

もしチェックされていないことを確認したい場合

cy.get('label').filter(':contains("Eevee")').children('input').first().should("not.be.checked");

また Pikachu 文字列を持つ label 要素が２個出現していることを確かめるには:

describe('pokemons', () => {
  it('pikachu', () => {
    cy.visit("/")
    cy.get('label').filter(':contains("Pikachu")').should('have.length', 2);
  });
});

以上です。