Zenn
Open4

Cypress小ネタ

Cypress
Tatsumi YamamotoTatsumi Yamamoto

urlに日本語が入ってることを確かめたいときがある。
でもCypressのcy.url()メソッドをそのまま使うとエラーになってしまうことがある。

// エラーになるかも?
cy.url().contains('こんにちは');

そういうときは

// urlをデコードする
cy.url({ decode: true }).contains('こんにちは');

とかやるとうまくできる

ちなみにcy.url()はcy.location('href')のaliasらしい

https://docs.cypress.io/api/commands/url#Syntax

Tatsumi YamamotoTatsumi Yamamoto

support/commands.ts内に新しいコマンドを追加しようとするとCypressのバージョンが新しめだと型関係で怒られることがある

support/commnads.ts
// 型 '"dataCy"' の引数を型 'keyof Chainable<any>' のパラメーターに割り当てることはできません。
Cypress.Commands.add('dataCy', (selector: string) => {
  return cy.get(`[data-cy=${selector}]`);
});

この場合は型宣言ファイルsupport/index.d.tsを追加するといい

support/index.d.ts
// 名前空間Cypressのinterface Chainable<Subject = any>を拡張する
declare namespace Cypress {
  interface Chainable<Subject = any> {
    dataCy: (selector: string) => Chainable<JQuery<HTMLElement>>;
  }
}