Cypress에서 Amplify Authenticator(React) 텍스트 상자를 가져오는 방법

인증 기능은 AWS Cognito를, 로그인 화면은 AWS Amplify의Authenticator(React)를 사용합니다.
Cypress를 통해 로그인하려면 일반적인 CSS 선택기는 얻을 수 없기 때문에 해결 방법의 비망록입니다.

하고 싶은 일

Amplify Authenticator의 로그인 화면의 텍스트 상자를 가져와cypress에서 로그인 ID와 비밀번호를 입력하는 테스트를 하고 싶습니다.

Amplify Authenticator의 기본 코드

Amplify Authenticator에서 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');

섀도우 DOM 가져오기

Amplify Authenticator의 로그인 화면이 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의 취득 방법에 대한 기사다.
참조 사이트:

cypress can't select authenticator inputs for @aws-amplify/ui-react

Authenticator

shadow