[Cypress] Cypress with Lambdatest

김상웅·2023년 4월 11일
0

이미 생이 마감된 인터넷 익스플로러를 비롯하여 우리는 많은 브라우저를 통해 웹 서비스를 사용하고 있습니다. 아마 대다수 사람들이 사용하는 크롬부터 파이어폭스, 엣지, 그리고 애플 유저에게 익숙한 사파리, 웹앱에 사용되는 일렉트론까지 다양한 브라우저가 있는데요.

E2E 테스트를 진행함에 있어 단 한명의 QA 개발자나 팀원이 로컬에서만 테스트를 한다면, Cypress Cloud를 이용해도 괜찮습니다.

하지만 개발팀의 효율성을 고려한다면 E2E 테스트는 배포 전 테스트를 위한 하나의 프로세스로 가져가는 것이 더욱 효율적일 것 같습니다. 따라서 이번 포스팅에서는 다른 환경에서도 동일한 브라우저와 운영체제 환경을 제공해주는 Lambdatest 클라우드 서비스에 대해 알아보겠습니다.

What is Lambdatest


Lambdatest는 이미 Most Powerful Cross Browser Testing Tool Online이라고 설명하고 있습니다. Lambdatest는 쉽게 말해 브라우저를 테스트하기 위한 온라인 서비스 중 하나로 테스트 사용자는 Selenium, Cypress 뿐만 아니라 직접 개발하여 호스팅하고 있는 웹 애플리케이션를 테스트할 수 있는 환경과 툴을 제공합니다.


(출처: Lambdatest)

Lambdatest 공식 홈페이지에서도 볼 수 있듯이 다양한 테스팅 서비스를 지원하고 있는데요. 저기 Cypress Testing도 눈에 들어오네요.



Why Lambdatest?


Cypress Cloud도 있고, Safari를 제외하면 크로스 브라우저 테스트가 가능한데 왜 Lambdatest를 이용하는가?

다른 테스트 환경에서도 테스트를 실행하고 결과를 확인할 수 있다.

물론 Cypress가 제공하는 Cloud도 훌륭한 서비스입니다. Cypress 앱이 실제 가동되는 환경과 동일하기 때문에 디버깅이 쉽고 속도도 빠릅니다. 하지만 여기서 짚고 넘어가야 하는 문제는 테스트를 실행하는 모든 사람의 PC에 브라우저 플랫폼이 모두 설치되어 있어야 한다는 것입니다.

Cross Browser Platform & OS

이러한 고민은 Lambdatest Cloud가 조금이나마 해결해주는 것 같습니다.

로컬의 환경과 개발 환경에 상관없이 누구나 동일한 커맨드만 입력하면 다양한 브라우저 플랫폼과 운영체제 환경에서 나의 웹 서비스를 테스트 할 수 있습니다.

지원하고 있는 브라우저는 다음과 같습니다:

  • Chrome
  • Firefox
  • Microsoft Edge
  • Safari (web-kit)

지원하는 OS 운영체제도 확인해보면 좋을 것 같습니다.

Browser & OS for Lambdatest



How to Use Lambdatest?


사실 Lambdatest를 어떻게 이용하는 지가 가장 중요한 부분일 것입니다.

Webpage

메인페이지는 다음 링크로 이동해주세요: Lambdatest
우리가 사용하는 다른 웹서비스와 마찬가지로 회원가입 후 로그인을 해주면 됩니다.

Dashboard

로그인 이후 우측 상단의 Dashboard를 클릭하여 테스트 진행 과정과 결과 뿐만 아니라 다양한 테스트 툴을 확인할 수 있는 대시보드로 이동해주세요.

Authorization

테스트 툴, 서비스를 이용하기 전에 유저 인증 정보를 확인해주세요.
우측 상단의 Access Key를 클릭하여 UsernameAccess Key 정보를 테스트하려는 애플리케이션의 환경변수로 지정해줍니다.

LT_USERNAME=복사한 username
LT_ACCESS_KEY=복사한 Acess Key

혹은 다음과 같이 CLI 상에서 환경변수를 지정할 수 있습니다:

$ export LT_USERNAME=복사한 username
$ export LT_ACCESS_KEY=복사한 Acess Key

lambdatest-cypress-cli

E2E 테스트의 진행 과정과 결과를 볼 수 있는 탭은 automation 탭입니다.
로컬에서 작성한 Cypress 테스트 코드를 우선 build 해야합니다.

그러기 위해서는 lambdatest-cypress-cli 모듈을 우선 설치해야합니다.

$ npm install lambdatest-cypress-cli

Automation Test

이후 과정은 아래 플래그만 잘 사용한다면 원하는 브라우저와 OS에 대한 테스트를 관리할 수 있습니다.

  • 브라우저 플래그: --browsers
  • 값: OS:Browser:version

CLI 상에서는 다음과 같이 작성해주면 됩니다.
플래그를 우선 적어주고 값을 기입해주세요.
브라우저와 운영체제, 브라우저의 버전 정보는 공식문서를 확인하는 것이 더욱 좋습니다.

# OS: Windows10
# Browsers: Firefox
# version: Latest version

$ lambdatest-cypress run --browsers Win10:Firefox:latest
profile
누구나 이해할 수 있도록

0개의 댓글