cypress로 크로스 브라우저 테스트✨

크로스 브라우저 테스트란?🤔

크로스 브라우저 테스트는 웹 페이지가 시장에서 사용되는 다른 브라우저 버전 및 운영 체제 버전에서 동일한 동작을 수행하는지 확인하는 것을 목표로 하는 웹 응용 프로그램에 대한 품질 보증 방법입니다. 즉, 다른 화면에서 웹 사이트의 품질을 보장합니다. .

편백나무로 하는 방법🧐

Cypress로 크로스 브라우저 테스트를 수행하려면 두 가지 접근 방식이 있습니다.

테스트가 로컬 컴퓨터 또는 CI 환경에서 사용 가능한 다른 브라우저에서 실행되도록 cypress 자체의 구성을 사용하는 첫 번째 것입니다.

두 번째 방법은 cypress로 여러 브라우저를 구현할 수 있는 일부 클라우드 테스트 환경을 사용하는 것입니다.

이 간행물에서는 두 번째 형식을 강조하지만 앞으로는 첫 번째 형식에 대한 게시물을 가져올 것입니다.

사전 요구 사항📑

browserstack에 계정이 생성됨

Node.js 설치됨

실습👩‍💻

클라우드 환경 선택

이 테스트 범주에서는 Browserstack 테스트 클라우드 환경을 사용합니다. 런타임 및 결과 대시보드에 대한 액세스 토큰이 필요하므로 browserstack 계정을 생성하는 것이 중요합니다.

browserstack에서 계정을 만드는 방법에 대한 자세한 내용은

테스트를 위해 프로젝트 복제

이 자습서에서는 실행을 위해 cypress serve rest 프로젝트를 사용합니다. 이를 위해 아래 명령에 따라 프로젝트를 시스템에 복제해야 합니다.

git clone https://github.com/marlo2222/cypress-serve-rest.git

프로젝트를 복제한 후 복제된 디렉터리에 들어가 다음 명령을 사용하여 실행할 종속성을 설치해야 합니다.

cd cypress-serve-rest

npm install

브라우저 스택 구성

cypress 프로젝트에서 browserstack을 구성하는 첫 번째 단계는 다음 명령을 사용하기 위해 Browserstack-Cypress CLI를 설치하는 것입니다.

npm install -g browserstack-cypress-cli

CLI가 설치된 상태에서 browserstack.json 파일을 생성해야 합니다. 이 파일을 사용하여 예를 들어 사용자의 자격 증명을 정의합니다. 파일을 만들려면 다음 명령을 사용합니다.

browserstack-cypress init

browserstack.json 파일에서 auth 섹션에 Browserstack 로그인 자격 증명을 추가합니다.

{
  ...
  "auth": {
    "username": "YOUR_USERNAME",
    "access_key": "YOUR_ACCESS_KEY"
  }
  ...
}

선택한 브라우저에 대한 테스트 및 버전을 실행하려는 브라우저 목록은 browsers 섹션의 browserstack.json 파일에도 알려야 합니다. 아래와 같이 동일한 브라우저에 대해 다른 버전을 사용할 수 있습니다.

{
  ...
  "browsers": [{
      "os": "Windows 10",
      "browser": "chrome",
      "versions": ["69", "80", "81"]
    },
    {
      "os": "Windows 10",
      "browser": "edge",
      "versions": ["94", "95"]
    },
    {
      "os": "Windows 10",
      "browser": "firefox",
      "versions": ["97", "98"]
    },
    {
      "os": "Windows 10",
      "browser": "opera",
      "versions": ["83", "84"]
    },
    {
      "os": "OS X Catalina",
      "browser": "edge",
      "versions": ["94", "95"]
    }
  ]
  ...
}

마지막으로 browserstack.json 파일에서 run_settings 프로젝트를 구성하기만 하면 됩니다. 파일은 아래와 유사해야 합니다.

{
 ...
  "run_settings": {
    "cypress_proj_dir": "./",
    "build_name": "Cypress Build: 1556",
    "parallels": 5,
    "npm_dependencies": {}
  },
  "connection_settings": {
    "local": false,
    "local_identifier": null
  }
 ...
}

메모:

빌드 이름 필드는 클라우드 환경에서 실행할 빌드 이름으로 사용됩니다.

파일이 5로 병렬 실행으로 정의되어 있지만
경우 실행은 1개의 인스턴스에서만 수행됩니다.

러닝😎

클라우드 환경을 사용하여 테스트를 실행하려면 다음 명령을 사용해야 합니다.

browserstack-cypress run

결과😀

그리고 여기 있습니다!!! browserstack.json 파일에 유효한 사용자와 토큰을 입력한 경우 콘솔에 제공된 링크를 통해 바로 실행할 수 있습니다.

테스트는 아래 이미지와 같이 browserstack.json 파일에 정의된 브라우저/OS 조합별로 그룹화됩니다.



결과가 포함된 출력은 아래 이미지와 같이 실행 후 콘솔에서도 사용할 수 있습니다.



질문이 있거나 연결을 원하시면 언제든지 링크로 연결해주세요!😀

📩
🐱‍👤