집 >웹 프론트엔드 >JS 튜토리얼 >지속적인 UI 테스트 파이프라인: GitHub Actions를 갖춘 BrowserStack

지속적인 UI 테스트 파이프라인: GitHub Actions를 갖춘 BrowserStack

DDD원래의: 2024-12-27 19:31:14815검색

Continuous UI Testing Pipeline: BrowserStack with GitHub Actions
우수한 서비스와 콘텐츠를 제공하더라도 사용자의 88%가 경험이 좋지 않은 사이트를 다시 방문하지 않는다는 사실을 알고 계셨습니까? 단순한 사치가 아닌, 제품이나 기업의 성공을 위해서는 원활한 사용자 인터페이스(UI)와 사용자 경험(UX)이 필수적임을 인식해야 할 때입니다.

여기서 지속적 UI 테스트가 시작됩니다. 기존 테스트 접근 방식을 버리고 지속적인 UI 테스트는 개발 및 배포의 거의 모든 단계에 통합됩니다. 이는 모든 브라우저와 장치의 완벽함을 보장할 뿐만 아니라 개발 파이프라인 속도를 늦추지 않고 정확성을 달성합니다.

이번 블로그에서는 BrowserStack 및 GitHub Actions 역할을 살펴보겠습니다. 전자(BrowserStack)를 사용하면 실제 브라우저 및 장치에서 자동화된 테스트를 실행할 수 있으며 비교할 수 없는 정확성을 보장합니다. 반면 GitHub Actions는 코드를 푸시할 때마다 테스트 워크플로를 원활하게 트리거하여 이 프로세스를 자동화합니다. 방법을 살펴보겠습니다.

지속적인 UI 테스트가 왜 중요한가요?

오늘날의 역동적인 환경에서 주기적인 UI 테스트를 소홀히 하면 다음과 같은 문제가 발생합니다.

깨진 레이아웃: 코드의 작은 변경으로 인해 의도치 않게 디자인이 중단되거나 요소가 잘못 배치되거나 인터페이스가 응답하지 않을 수 있습니다.
잘못된 브라우저 간 호환성: 애플리케이션이 한 브라우저에서는 원활하게 작동하다가 다른 브라우저에서는 중단될 수 있습니다. 이는 특히 사용자에게 실망스러울 수 있습니다.
불량한 사용자 경험: 결함이 있는 인터페이스로 인해 사용자를 쫓아내는 데 몇 초가 걸립니다. 이는 브랜드 평판과 수익에 직접적인 영향을 미칩니다.

특정 CI/CD 워크플로에서는 코드가 지속적으로 변경될 때마다 위험이 배가됩니다. 정기적인 UI 일관성 검사를 통해 이러한 문제와 위험을 미리 확인할 수 있습니다. 비용이 많이 드는 수정, 막바지 변경, 고객 이탈, 릴리스 지연 등의 문제를 겪지 않고 구축 단계에서 이러한 테스트 및 점검에 투자하는 것이 실질적으로 가능합니다.

일관된 UI 검사의 몇 가지 대규모 이점은 다음과 같습니다.

개발 속도 향상: 장기적 경로에 중점을 둔다면 무작위로 디버깅하지 않고 빌드 단계에서 코드 손상을 해결합니다. 자동화된 테스트로 속도와 혁신이 향상됩니다.
더 높은 신뢰성: 지속적인 테스트를 통해 프로덕션에 유입될 수 있는 UI 버그가 확실히 줄어듭니다. 드디어 모든 환경에서 일관된 성능을 발휘하게 되었습니다!

수동 테스트와 지속적인 UI 테스트:

Aspect	Continuous UI Testing	Manual Test Techniques
Execution Time	Automated & faster	Slow & resource-intensive
Coverage	Comprehensive across browsers and devices	Limited to selected devices
Scalability	Scalable with CI/CD workflows.	Difficult to scale with frequent changes
Error Detection	Consistent & accurate error detection	Prone to human & other errors
Cost Efficiency	Lower with automation.	Expensive over time due to manual effort

측면 지속적인 UI 테스트 수동 테스트 기법 실행 시간 자동화되고 더 빨라짐 느리고 리소스 집약적 보도 브라우저와 기기 전반에 걸친 포괄적인 선택한 기기로 제한됨 확장성 CI/CD 워크플로로 확장 가능. 잦은 변경으로 인해 확장이 어려움 오류 감지 일관되고 정확한 오류 감지 인적 오류 및 기타 오류가 발생하기 쉬움 비용 효율성 자동화로 낮추세요. 수작업으로 인해 시간이 지남에 따라 비용이 많이 발생함

브라우저스택이란 무엇인가요?

BrowserStack은 기본적으로 개발자가 광범위한 브라우저, 운영 체제 및 장치에서 애플리케이션을 테스트할 수 있게 해주는 선도적인 클라우드 기반 테스트 플랫폼으로 알려져 있습니다. 사내 장치 연구실을 완벽하게 대체할 수 있습니다. BrowserStack의 추가 이점은 다음과 같습니다.

플랫폼에 대한 시각적 테스트: 플랫폼 단편화에 대한 걱정 없이 일관된 사용자 경험을 제공하는 데 도움이 됩니다. 시각적 회귀를 완벽하게 감지하고 픽셀 단위까지 완벽한 디자인을 가능하게 합니다.
자동 테스트 지원: 깨끗하고 강력한 UI 검증을 위해 BrowserStack에서 Cypress, Selenium 또는 기타 테스트 프레임워크를 쉽게 실행할 수 있습니다.
크로스 브라우저 및 장치 테스트: 다양한 장치의 다양한 브라우저와 버전에서 원활한 실행을 검증합니다.

Continuous UI Testing Pipeline: BrowserStack with GitHub Actions

GitHub Actions란 무엇인가요?

GitHub과 원활하게 통합되는 자동화 도구입니다. '작업'은 개발자가 특히 코드 푸시, PR(풀 요청) 또는 예약된 트리거를 기반으로 워크플로를 시작, 관리 및 트리거하는 데 도움이 됩니다. GitHub Actions의 주요 기능은 다음과 같습니다.

병렬 실행: 기본적으로 작업을 동시에 실행하여 시간을 절약하고 전달 속도를 높이는 데 도움이 됩니다.
사용자 정의 가능한 파이프라인: 특정 CI/CD 요구 사항에 맞게 조정된 YAML 파일을 사용하여 작업을 매우 효율적으로 정의하여 프로젝트 워크플로를 정의할 수 있습니다.
광범위한 통합: 모든 종류의 포괄적인 자동화를 위해 BrowserStack 또는 AWS 등과 같은 타사 도구와 원활하게 결합할 수 있습니다.
이벤트 기반 워크플로: 아마도 가장 좋은 점은 테스트 실행이나 저장소 코드 배포와 같은 저장소 이벤트를 기반으로 작업을 자동화할 수 있다는 것입니다.

전제조건 :

다음은 BrowserStack 및 GitHub Actions를 사용하여 인터페이스 테스트 설정을 수행하는 데 필요한 도구 목록입니다.

GitHub 저장소
BrowserStack에 액세스(자동화).
Selenium/Cypress 테스트 스크립트(또는 블로그에 제공되는 예제 스크립트).

BrowserStack은 GitHub Actions와 어떻게 통합되나요?

BrowserStack 및 GitHub Actions 선택의 주요 결과물을 마침내 이해한 후에는 두 가지가 모두 효과적으로 강력하고 자동화될 수 있다는 결론을 내릴 수 있습니다. 다양한 장치와 브라우저에서 UI 테스트를 얼마나 깔끔하게 실행할 수 있는지 자세히 알아보세요. 통합 프로세스에 대한 단계별 기술 연습에 오신 것을 환영합니다.

Step-1 :	Event Triggering: Activating Your Workflow
Step-2 :	Code Checkout: Preparing the Test Environment
Step-3 :	Test Execution on BrowserStack: Running UI Tests
Step-4 :	Results Collection and Reporting

위의 4가지 단계 각각에 대한 자세한 접근 방식을 살펴보겠습니다.

1단계: 이벤트 트리거: 워크플로 활성화

'이벤트 기반'이라는 말은 기본적으로 GitHub Actions의 워크플로가 저장소 이벤트에 의해 트리거된다는 의미입니다. 초인종처럼 작동합니다. 활성화될 때까지 아무 일도 일어나지 않아 미리 정의된 응답이 실행됩니다.

이와 유사하게 GitHub Actions에는 이벤트에 따라 특정 방식으로 워크플로를 트리거할 수 있는 몇 가지 이벤트가 있습니다. 몇 가지 예는 다음과 같습니다.

- 푸시: 코드가 특정 분기(예: 메인, 개발 등)로 푸시됩니다.
  
  * 풀 요청(PR): 풀 요청 시작, 동기화 또는 병합
  
  * 삭제: 브랜치나 태그가 삭제되는 경우

주어진 .yml 파일의 구성을 통해 이러한 예제 이벤트를 이해할 수 있습니다.

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main
  delete:  # Trigger workflow when a branch or tag is deleted

2단계: 코드 체크아웃: 테스트 환경 준비

이제 이 프로세스의 다음 단계는 GitHub Actions의 워크플로를 사용하여 저장소 코드베이스를 가져오는 것입니다. 작업/체크아웃 작업을 사용하면 저장소의 모든 테스트 스크립트와 구성 파일을 성공적으로 실행할 수 있는지 확인할 수 있습니다.

이를 위한 YAML 스니펫의 예는 다음과 같습니다.

steps:
  - name: Checkout Repository
    uses: actions/checkout@v3

?
기본적으로 체크아웃 작업은 워크플로 속도를 높이기 위해 최신 커밋만 가져옵니다. 필요한 경우 전체 저장소 기록을 보려면 fetch-length: 0을 사용하세요.

3단계: BrowserStack에서 테스트 실행: UI 테스트 실행

BrowserStack을 GitHub Actions와 통합하는 핵심 요소는 BrowserStack의 강력한 인프라에서 UI 테스트를 원활하게 실행하는 것입니다. 이 중요한 설정을 통해 개발자는 모든 유형의 브라우저 간 테스트를 매우 효율적으로 자동화할 수 있습니다. 결과적으로 다양한 환경에서 일관된 애플리케이션 성능을 얻을 수 있습니다. BrowserStack에서 테스트 실행을 구성하는 방법은 다음과 같습니다.

BrowserStack 자격 증명 설정:

* Authenticating test execution will require Access Keys.

* We store these Access Keys securely as ‘GitHub Secrets’ (`BROWSERSTACK_USERNAME` and `BROWSERSTACK_ACCESS_KEY`):

    ```yaml
    steps:
      - name: Set BrowserStack Credentials
        env:
          BROWSERSTACK_USERNAME: ${{ secrets.BROWSERSTACK_USERNAME }}
          BROWSERSTACK_ACCESS_KEY: ${{ secrets.BROWSERSTACK_ACCESS_KEY }}
    ```

종속성 설치:

* You must then install the project dependencies based on your project (e.g., Selenium, Cypress). This `.yml` file could be an example:

    ```yaml
    steps:
      - name: Install Dependencies
        run: |
          npm install
          npm run build
    ```

BrowserStack CLI 또는 API를 통해 테스트 실행:

* Configure the test runner to execute on BrowserStack Automate:  
    Example for Selenium:

    ```yaml
    steps:
      - name: Run Selenium Tests on BrowserStack
        run: |
          npx selenium-standalone start &
          npm test
    ```

* Example for Cypress (via BrowserStack Cypress CLI):

    ```yaml
    steps:
      - name: Run Cypress Tests on BrowserStack
        run: |
          browserstack-cypress run --sync
    ```

4단계: 결과 수집 및 보고

위에서 언급한 것처럼 BrowserStack은 포괄적으로 생성하여 완벽한 보고서와 분석 기능을 제공합니다. 여기에는 다음이 포함됩니다.

실행 로그: 디버깅을 위한 단계별 로그 세트
스크린샷: 중요한 테스트 단계를 캡처하여 제출합니다.
동영상: 실시간으로 수행된 테스트 실행 전체 녹화
테스트 상태: 애플리케이션의 통과, 실패, 건너뛴 테스트의 주요 내용입니다.

언급된 아티팩트는 쉽게 접근할 수 있도록 GitHub Actions 워크플로에 쉽게 연결할 수 있습니다. .yml 파일의 경우 이를 수행하는 방법은 다음과 같습니다.

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main
  delete:  # Trigger workflow when a branch or tag is deleted

통합의 고급 기능

병렬 테스트 실행:

BrowserStack Automate의 병렬 테스트 기능을 사용하여 다양한 브라우저와 장치에서 여러 테스트 사례를 동시에 실행하세요. 이는 테스트 프레임워크의 설정(예: Selenium의 maxInstances)을 통해 구성할 수 있습니다.
동적 브라우저 및 장치 매트릭스:

JSON 구성을 사용하여 테스트 매트릭스를 동적으로 정의하여 테스트 중인 브라우저와 장치를 쉽게 업데이트할 수 있습니다.
```
steps:
  - name: Checkout Repository
    uses: actions/checkout@v3
```

오류 알림:

Slack 또는 이메일과 같은 통합을 사용하여 워크플로 오류에 대한 알림을 설정하세요.

* Authenticating test execution will require Access Keys.

* We store these Access Keys securely as ‘GitHub Secrets’ (`BROWSERSTACK_USERNAME` and `BROWSERSTACK_ACCESS_KEY`):

기술도

아래는 통합 워크플로를 보여주는 다이어그램입니다

GitHub 이벤트: 코드 푸시 또는 풀 요청이 워크플로를 트리거합니다.
CI 파이프라인: GitHub Actions가 코드와 종속성을 가져옵니다.
BrowserStack 실행: 테스트는 BrowserStack Automate에서 실행됩니다.
테스트 결과: 로그, 스크린샷, 보고서가 생성되어 워크플로에 다시 연결됩니다.

BrowserStack과 GitHub Actions의 원활한 통합을 활용하여 팀은 UI 테스트를 자동화하여 CI/CD 파이프라인을 가속화하는 동시에 기기와 브라우저 전반에 걸쳐 포괄적인 적용 범위를 보장할 수 있습니다.

Continuous UI Testing Pipeline: BrowserStack with GitHub Actions

이 통합을 통해 UI 테스트가 간소화되어 팀에서 문제를 조기에 식별하고 고품질 애플리케이션을 더 빠르게 제공할 수 있습니다.

UI 테스트 효율성을 향상시키는 전문가 팁

병렬 테스트 활용: 여러 브라우저와 기기에서 동시에 테스트를 실행하여 테스트 주기를 가속화하고 실행 시간을 줄이고 적용 범위를 개선합니다.
재시도 메커니즘 구현: 불안정한 테스트 영향을 줄이고 일관된 결과를 보장하기 위해 재시도를 구현합니다.
시각적 회귀 테스트 채택: Percy와 같은 도구를 사용하면 시각적 스냅샷을 비교하여 의도하지 않은 UI 변경 사항을 파악하고 원활한 사용자 인터페이스를 보장할 수 있습니다.

일반적인 문제 및 해결 방법

지속적인 UI 테스트를 구현할 때 몇 가지 일반적인 문제에 직면할 수 있습니다. 다음은 문제 해결을 위한 몇 가지 문제 해결 팁입니다.

불안정한 테스트:

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main
  delete:  # Trigger workflow when a branch or tag is deleted

구성 오류:

steps:
  - name: Checkout Repository
    uses: actions/checkout@v3

브라우저 호환성 문제

* Authenticating test execution will require Access Keys.

* We store these Access Keys securely as ‘GitHub Secrets’ (`BROWSERSTACK_USERNAME` and `BROWSERSTACK_ACCESS_KEY`):

이 경우 채택할 수 있는 모범 사례는 다음과 같습니다.

안정적인 테스트 환경 유지: 일관된 결과를 보장하기 위해 전용 테스트 환경을 설정합니다.
테스트 성능 모니터링: 테스트 실행 시간을 주시하고 불필요한 테스트를 실행하지 마세요.
로그 검토: 테스트가 무엇이 잘못되었는지에 대한 명확한 통찰력을 얻지 못한 경우 항상 로그를 검사하십시오.
병렬 테스트: 효율성과 적용 범위를 향상하려면 여러 브라우저와 기기에서 동시에 테스트하세요.

이러한 일반적인 문제를 해결하고 모범 사례를 따르면 UI 테스트의 신뢰성을 높이고 보다 원활한 테스트 환경을 보장할 수 있습니다.

Keploy: 속도와 정확성에 중점을 둔 테스트 자동화 단순화

Keploy는 최신 애플리케이션에 대한 테스트 생성 및 실행을 간소화하도록 설계된 오픈 소스 노코드 테스트 플랫폼입니다. API 상호 작용을 자동으로 캡처함으로써 수동 개입 없이 안정적이고 포괄적인 테스트 사례를 생성하는 데 도움이 됩니다.

지속적인 UI 테스트에 Keploy를 사용하는 이유는 무엇입니까?

자동 테스트 생성: Keploy는 런타임 중에 API 호출을 기록하여 자동으로 테스트 케이스를 생성하므로 수동 스크립팅의 필요성이 줄어듭니다.
회귀 테스트: 편차를 감지하고 표시하여 애플리케이션이 일관된 성능을 유지하도록 보장합니다.
원활한 CI/CD 통합: Keploy는 GitHub Actions 및 BrowserStack과 같은 도구와 함께 작동하여 CI/CD 파이프라인의 효율성을 향상시킵니다.
더 빠른 반복: 테스트 스크립팅에 소요되는 시간을 줄이는 기능을 통해 팀은 개발과 혁신에 집중할 수 있습니다.

사용 사례:

Keploy와 BrowserStack을 결합하면 일관된 크로스 플랫폼 성능을 위해 API와 UI 요소를 모두 포괄하는 포괄적인 테스트 솔루션을 제공합니다. Keploy를 워크플로에 통합하면 최고의 애플리케이션 품질을 유지하면서 테스트 효율성을 더욱 향상하고 제공을 가속화할 수 있습니다.

결론

지속적인 UI 테스트는 더 이상 사치가 아니라 오늘날의 빠르게 변화하는 개발 환경에서 필수입니다. BrowserStack 및 GitHub Actions와 같은 도구를 사용하면 복잡한 테스트 프로세스를 자동화하여 팀이 원활한 크로스 플랫폼 사용자 경험을 제공할 수 있습니다. 이러한 통합을 통해 개발 주기가 빨라지고 안정성이 높아지며 비용이 절감되어 애플리케이션이 최고 품질 표준을 충족할 수 있습니다.

이러한 도구를 Keploy와 같은 혁신적인 플랫폼과 결합하면 개발 주기 초기에 UI 및 API 수준 문제를 모두 포착하여 테스트 전략을 한 단계 더 발전시킬 수 있습니다. 이는 CI/CD 파이프라인을 가속화할 뿐만 아니라 애플리케이션의 전반적인 탄력성과 사용자 만족도를 강화합니다.

리소스 -

BrowserStack 문서
GitHub 작업 문서
BrowserStack을 사용한 크로스 브라우저 테스트

위 내용은 지속적인 UI 테스트 파이프라인: GitHub Actions를 갖춘 BrowserStack의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

json Resource define if for while include require catch Error using Interface finally Event Collection delete default this history github kind ux ui Access Recording Other

성명：

이전 기사：블로그 표지 이미지를 위한 무료 도구를 만들었습니다.다음 기사：블로그 표지 이미지를 위한 무료 도구를 만들었습니다.