Zenn
🐙

Cypress で Amplify Authenticator (React) のテキストボックスを取得する方法

2021/11/12に公開
React
Amplify
Cypress
shadowdom
authenticator
tech

認証機能に AWS Cognito を使用し、ログイン画面に AWS Amplify の Authenticator (React) を使用しています。
Cypress でログインしようとすると、通常の CSS セレクターでは取得できませんでしたので、解決方法の備忘録になります。

やりたいこと

AmplifyAuthenticator のログイン画面のテキストボックスを取得して cypress からログインIDやパスワードを入力するテストを書きたいです。

AmplifyAuthenticator の基本的なコード

AmplifyAuthenticator で React のログイン画面を表示するには以下のように記載します。
（公式サイトより）

import React from "react";
import Amplify from "aws-amplify";
import {AmplifyAuthenticator, AmplifySignOut} from "@aws-amplify/ui-react";
import awsconfig from "./aws-exports";

Amplify.configure(awsconfig);

const App = () => (
 <AmplifyAuthenticator>
   <div>
     My App
     <AmplifySignOut />
   </div>
 </AmplifyAuthenticator>
);

通常の CSS セレクターで取得してみた

通常の CSS セレクターでは取得できませんでした。

cy.get('#email').type('hoge');

shadow DOM を取得する

AmplifyAuthenticator のログイン画面が shadow DOM になっていたので shadow を使うことで取得できるようになりました。

cy.get('amplify-sign-in').shadow().find('#email').type('hoge');

エイリアスを作成する

小ネタですが cy.get('amplify-sign-in').shadow() の部分が冗長かつ長いのでエイリアスを作成すると便利です

cy.get('amplify-sign-in').shadow().as('sign-in');
cy.get('@sign-in').find('#email').type('hoge');

まとめ

Authenticator というより shadow DOM の取得方法の記事になってしまいました。

参考サイト：

Discussion