npm install cypress --save-dev
npx cypress open
→自動でcypress.jsonとcypress用のディレクトリが作られるcypress.json
に設定を追加する
{
"baseUrl": "http://localhost:8080",
"viewportWidth": 1280,
"video": true,
"videoCompression": 16,
"ignoreTestFiles": ["**/examples/*", "**/__snapshots__/*"],
}
cypress/support/commands.jsに以下を追加する
// keep session across tests
Cypress.Cookies.defaults({
preserve: 'connect.sid', // express用 クッキー名は変えること
});
- cypress/support/commands.jsに以下を追加する
const LOCAL_STORAGE_MEMORY = {};
Cypress.Commands.add('saveLocalStorageCache', () => {
Object.keys(localStorage).forEach(key => {
LOCAL_STORAGE_MEMORY[key] = localStorage[key];
});
});
Cypress.Commands.add('restoreLocalStorageCache', () => {
Object.keys(LOCAL_STORAGE_MEMORY).forEach(key => {
localStorage.setItem(key, LOCAL_STORAGE_MEMORY[key]);
});
});
- スペックの
beforeEach
でrestoreLocalStorage()
を、afterEach
でsaveLocalStorage()
を呼ぶ - スペックの
after
でclearLocalStorage()
を呼ぶ
// テキスト取得のカスタムコマンドを追加する
Cypress.Commands.add('getText', path => {
cy.get(path)
.invoke('text')
.then(x => cy.wrap(x));
});
// 複数要素のテキスト取得のカスタムコマンドを追加する
Cypress.Commands.add('getTexts', { prevSubject: true }, elem => {
const texts = [];
elem.each((_, e) => {
texts.push(e.textContent);
});
return cy.wrap(texts);
});
// 値取得のカスタムコマンドを追加する
Cypress.Commands.add('getVal', path => {
cy.get(path)
.invoke('val')
.then(x => cy.wrap(x));
});
// 必要なら MaterialUIのselectのためのカスタムコマンドを追加する
Cypress.Commands.add('selectForMui', (path, index) => {
cy.get(path).click({ force: true });
cy.wait(200);
const pathToSelect = `ul[role="listbox"] li:nth-child(${index})`;
cy.get(pathToSelect)
.invoke('text')
.then(text => {
cy.get(pathToSelect).click({ force: true });
cy.wait(200);
return cy.wrap(text);
});
});
Cypress.Commands.add('selectForMuiByText', (path, text) => {
cy.get(path).click({ force: true });
cy.wait(200);
const pathToSelect = `ul[role="listbox"] li`;
cy.get(pathToSelect)
.contains(text)
.click({ force: true })
.then(() => {
cy.wait(200);
return cy.wrap(text);
});
});
npm install --save-dev eslint-plugin-cypress
.eslintrc.json
に以下を追加
{
"extends": [
"plugin:cypress/recommended"
],
"overrides": {
{
"files": ["cypress/integration/**/*"],
"env": { "browser": true, "cypress/globals": true },
"rules": {
"cypress/no-unnecessary-waiting": "warn",
"no-return-assign": "warn"
}
}
}
}
npm install --save-dev cypress-plugin-snapshots
- cypress/plugins/index.jsに以下を追加
const { initPlugin } = require('cypress-plugin-snapshots/plugin');
module.exports = (on, config) => {
// `on` is used to hook into various events Cypress emits
// `config` is the resolved Cypress config
//
initPlugin(on, config);
return config;
};
- cypress/support/commands.jsに以下を追加
import 'cypress-plugin-snapshots/commands';
参照:meinaart/cypress-plugin-snapshots#10
- cypress/support/index.jsに以下を追加
// a workaround to run image snapshots for run all tests.
import path from 'path';
export const fixCypressSpec = filename => {
const projectRoot = Cypress.config('projectRoot');
const absolute = path.join(projectRoot, filename);
Cypress.spec = {
absolute,
name: path.basename(filename),
filename,
};
};
fixCypressSpec(__filename)
をbeforeEach
で呼ぶ