Cypress 基礎: 取得する要素の範囲を限定する
はじめに
今回は Cypress の基礎として「特定の要素内から要素を取得する方法」を within API を使ってご紹介します。
within を使うことで重複したコードを書くことなく、簡潔に保つことができます。
tldr
実際のコード例を示します。テーブルから td 要素を取得します。
cy.get("table")
.eq(0)
.find("tbody")
.find("tr")
.within(() => {
cy.get("td").eq(0).contains("foo");
cy.get("td").eq(1).contains("bar");
cy.get("td").eq(2).contains("baz");
});同様のテストを冗長に書くと以下のようになります。
cy.get("table")
.eq(0)
.find("tbody")
.find("tr")
.find("td")
.eq(0)
.contains("foo");
cy.get("table")
.eq(0)
.find("tbody")
.find("tr")
.find("td")
.eq(1)
.contains("bar");
cy.get("table")
.eq(0)
.find("tbody")
.find("tr")
.find("td")
.eq(2)
.contains("baz");すこし気をつけたいこと
個人的にハマった経験も共有します。
within 内でボタンをクリックしてドロップダウンを表示し、ドロップダウン内のリスト要素を取得することができませんでした。これは DOM のコンテキストが異なるためです（モーダルなども同様）。
ドロップダウンを表示した後は within 外で改めて get してドロップダウン要素を取得してください。
参考
https://docs.cypress.io/api/commands/within
さいごに
本記事では Cypress の基本的な使い方を紹介しました。API を駆使して簡潔で見通しのよいテストコードを書きたいですね。
以上、本記事が誰かの助けになれば幸いです。
Gaji-Laboでは、React経験が豊富なフロントエンドエンジニアを募集しています
弊社ではReactの知見で事業作りに貢献したいフロントエンドエンジニアを募集しています。大きな制作会社や事業会社とはひと味もふた味も違うGaji-Laboを味わいに来ませんか？
もちろん、一緒にお仕事をしてくださるパートナーさんも随時募集中です。まずはお気軽に声をかけてください。お仕事お問い合わせや採用への応募、共に大歓迎です！
求人応募してみる！
