이메일 테스트 기능을 사용하여 2단계 인증을 테스트하는 방법

2단계 인증은 웹 애플리케이션에 로그인하거나 사용자 계정을 만들 때 자주 사용됩니다. 사용자는 브라우저와 상호 작용하고 인증 코드가 포함된 이메일을 열어 브라우저의 해당 필드에 코드를 입력합니다. 이 과정은 복잡하기 때문에 테스트를 자동화하기가 상당히 어렵습니다.

Autify를 사용하면 다음과 같이 할 수 있습니다😉.

이 문서에서는 Autify의 이메일 테스트 기능과 JS 단계를 사용하여 2단계 인증(2SV) 테스트를 자동화하는 방법에 대해 알아봅니다.

전제 조건

보안 코드가 사용자의 이메일 주소로 전송되는 이메일 기반 2SV 프로세스를 자동으로 테스트하려면 테스트 대상 애플리케이션(AUT) 및 Autify 환경이 다음 전제 조건을 충족해야 합니다.

테스트 대상 애플리케이션(AUT)의 사전 요구 사항

• AUT에서 Autify의 이메일 테스트 기능이 대상 계정에 발급하는 이메일 주소를 지정할 수 있어야 합니다(도메인: testmail.autify.com).
• AUT의 확인 프로세스는 이메일을 통해 인증 코드를 발급해야 합니다.

Autify의 전제 조건

• 이메일 테스트 기능을 사용할 수 있어야 합니다.

  • 이메일 테스트 기능을 사용할 수 있는 경우 **오티파이 레코더에 아래와 같이 이메일 아이콘이 표시됩니다. 녹화를 시작할 준비가 되었습니다!
    
  • 이메일 테스트 기능을 사용할 수 없는 경우**, 아래와 같이 자동 인증 레코더에 이메일 아이콘이 표시되지 않습니다. 이 경우 문의 양식으로 연락하여 평가판을 요청해 주세요. 이메일 테스트 기능을 사용해 보실 수 있도록 설정해 드리겠습니다👍.
    

• 고정 이메일 주소를 사용하는 경우 이메일 주소를 미리 생성해야 합니다.

  • 워크스페이스 설정 페이지에서 고정 이메일 주소를 만들 수 있습니다. 이메일 테스트 기능에서 사용할 수 있는 고정 이메일 주소 와 임의 이메일 주소 의 차이점에 대해 자세히 알고 싶다면 이 글을 참조하세요.
  • 사용할 이메일 유형을 결정하려면 다음 경험 법칙을 참조하세요:
    • 매번 동일한 멤버가 로그인하는 2SV 프로세스 테스트하기
      → 고정 이메일 주소
    • 사용자가 매번 고유한 이메일 주소를 사용하여 등록하는 2SV 프로세스 테스트
      → 무작위 이메일 주소

시나리오는 어떤 모습일까요?

아래는 완성된 시나리오의 예시입니다. 각 단계에서는 다음과 같은 작업이 수행됩니다:

• 2단계: Autify의 이메일 테스트 기능에서 발급한 이메일 주소를 입력합니다.
• 5-8단계: 새 창에서 이메일을 엽니다. 8단계에서는 JS 단계를 사용하여 2SV 코드를 가져와 반환합니다.
• 단계 11: 7단계에서 반환된 2SV 코드를 2SV 양식에 입력합니다.
• 단계 12-13: 2SV 프로세스를 진행하여 성공했는지 확인합니다.

시나리오 상세 페이지

테스트 결과 페이지

11단계에서 8단계에서 얻은 2SV 코드가 입력된 것을 확인할 수 있습니다.

시나리오 생성 방법

이제 위에 표시된 시나리오를 만드는 방법을 살펴보겠습니다.

이 과정은 두 단계로 나눌 수 있습니다:

• 시나리오 녹화
• 녹화된 시나리오 편집

시나리오 녹화하기

1. 시나리오를 만듭니다. 웹 애플리케이션이 2SV 코드가 포함된 이메일을 보낼 때까지 동작을 기록합니다.

자동 인증 레코더에서 이메일 주소를 열고 '클립보드에 복사' 아이콘을 클릭하여 대상 이메일 주소를 복사합니다.

웹 애플리케이션으로 돌아가서 복사한 이메일 주소를 이메일 주소 필드에 입력합니다. 인증 절차의 첫 번째 단계를 기록합니다.

2. 2SV 이메일이 발송되는 단계를 기록한 후 새 창을 열어 이메일을 엽니다. 이 창은 현재 상호작용 중인 창과 분리되어 있어야 합니다. (URL은 선택 사항입니다.)
   

3. 새 창에서 Autify Recorder의 해당 이메일 주소를 클릭하고 2SV 코드가 포함된 이메일을 엽니다.
   

4. 요소가 표시되어야 함_ 어설션을 추가하여 이메일의 2SV 코드가 표시되는지 확인합니다. 또한 해당 요소의 CSS 선택기를 확인합니다(나중에 JS 단계에서 사용하겠습니다). CSS 선택기를 확인하는 방법에 대한 자세한 내용은 이 문서를 참조하세요.)
   그런 다음 창을 닫습니다.
   

5. 인증 양식 창으로 돌아갑니다. 이메일에 표시된 2SV 코드를 양식에 입력하고 녹화를 계속합니다.

녹화된 시나리오 편집하기

녹화가 끝나면 이메일을 통해 동적 2SV 코드를 받기 위한 JS 단계를 준비해야 합니다.

1. 2SV 이메일을 여는 스텝 바로 뒤에 JS 스텝을 삽입합니다.
   
2. JS 스텝에서 이메일에서 얻은 문자열을 반환합니다. 샘플 코드는 아래와 같습니다. <TODO: REPLACE SELECTOR>를 이메일의 구조를 따르는 내용으로 대체하세요.

/**
* 요소 찾기
*/
var selector = "<TODO: 선택자 바꾸기>";
var element = document.querySelector(selector);

/**
* 존재하지 않는 경우 프로세스 중지
*/
if (!element) {
throw new Error('오류: 선택자(' + 선택자 + ')가 있는 엘리먼트를 찾을 수 없습니다.');
}

/**
* 텍스트 콘텐츠 반환
*/
element.textContent를 반환합니다;

2SV 코드를 입력하는 단계에서 입력 값을 '기타 단계의 결과'로 변경하고 JS 단계에서 반환된 값을 입력합니다.

끝났습니다! 이제 Autify에서 고유 인증 코드가 포함된 이메일을 수신하여 양식에 입력할 수 있습니다!

이 글이 Autify를 사용하여 이메일 기반 2단계 인증이 포함된 테스트를 자동화하는 방법을 이해하는 데 도움이 되었기를 바랍니다. 이메일 테스트 및 인증에 대해 궁금한 점이 있으면 언제든지 지원팀에 문의해 주세요😊.

더 읽어보기

• 다양한 인증 방법 테스트하기