모바일 브라우저에서 Cypress 테스트를 실행하는 방법

가장 자주 사용되는 자동화 테스트 도구 중 하나인 Cypress는 엔드 투 엔드 자동화, 단위 테스트 및 여러 API 테스트 유형을 지원합니다. 많은 이점으로 인해 개발자와 테스터가 빠르게 선호하게 되었으며 이러한 서클에서 빠르게 인기를 얻었습니다.

이 기사에서는 모바일 브라우저에서 웹 사이트의 Cypress 테스트를 실행하는 방법에 대해 설명합니다.

모바일 웹 브라우저 테스트의 중요성

PC와 Macbook에 Chrome, Safari, Edge 등과 같은 브라우저가 있는 것처럼 모바일 장치에는 이러한 브라우저의 자체 버전이 장착되어 있습니다. 모바일 브라우저는 모바일 장치의 하드웨어 및 소프트웨어 사양에 따라 웹 사이트를 렌더링합니다. 이러한 브라우저에서 사이트를 테스트하는 것은 페이지의 반응형 디자인인 반응형 디자인이 의도한 대로 작동하는지 확인하는 데 중요합니다. 즉, 다양한 장치 화면 크기, 해상도 및 모바일 브라우저의 매개변수에서 웹사이트가 어떻게 작동하는지 확인합니다.

반응형 디자인은 웹사이트에 구현될 때 기능 결함 없이 모든 장치에서 원활하게 실행될 수 있도록 합니다. 사이트는 데스크톱과 같은 다양한 장치를 통해 액세스하기 때문에 필수적입니다. 모바일, 태블릿 등

웹사이트가 반응형 접근 방식으로 설계되고 모바일 장치에서 렌더링되는 경우 장치 화면 크기 및 해상도에 따라 CSS 요소를 조정합니다. 여기에는 화면 크기에 따라 CSS 요소 숨기기 및 표시도 포함될 수 있습니다. 이 기능을 테스트하는 것을 뷰포트 테스트라고도 하며 이러한 테스트는 Cypress의 뷰포트 기능을 사용하여 실행할 수 있습니다.

물론 자동화는 데스크톱이든 모바일 장치이든 포괄적인 브라우저 테스트 전략을 만드는 데 필수적입니다. 반복적인 작업을 처리하고 사람의 실수를 줄이며 병렬 테스트를 통해 더 빠른 결과를 생성하여 시간과 노력을 줄입니다.

Cypress로 모바일 브라우저에서 웹사이트 테스트

Cypress는 화면 크기를 설정하는 뷰포트 명령을 제공합니다. 뷰포트는 장치마다 다릅니다. 예를 들어. iPad 2의 뷰포트는 768X1024이고 iPhone 3의 뷰포트는 320X 480입니다.

cypress의 뷰포트 명령은 해당 장치의 높이와 너비를 허용합니다. 구문은 다음과 같습니다.

cy.viewport(height, width)

예: cy.viewport(768, 1024)
이것이 테스터가 Cypress에서 뷰포트를 수동으로 설정하는 방법입니다.

Cypress는 사전 정의된 장치 및 뷰포트 세트도 제공합니다. 이들 중 하나를 사용하려면 높이와 너비를 전달하는 대신 장치 이름을 직접 전달하십시오.

예: cy.viewport('iphone-6')

아래는 Cypress에서 사용 가능한 미리 정의된 장치 뷰포트 목록입니다.


출처: cypress.io.

뷰포트 사용을 보여주는 간단한 테스트

describe('Nav Menus', () => {
  context('iphone-5 resolution', () => {
    beforeEach(() => {
      cy.viewport('iphone-5')
    })
    it('displays mobile menu on click', () => {
      cy.get('nav .desktop-menu').should('not.be.visible')
      cy.get('nav .mobile-menu')
        .should('be.visible')
        .find('i.hamburger')
        .click()
      cy.get('ul.slideout-menu').should('be.visible')
    })
  })
})

위의 코드를 고려하십시오.
cy.viewport('iphone-5'): 뷰포트를 iPhone 5로 설정합니다. 즉 디스플레이 해상도가 iPhone 5와 동일하므로 iPhone 5에서 웹 페이지가 렌더링되는 방식을 테스트하고 볼 수 있습니다.

웹 페이지가 렌더링되는 방식은 액세스하는 장치에 따라 다릅니다. 이 시나리오에서는 iPhone으로 웹 페이지를 테스트할 수 있습니다. 다음 몇 줄은 표시되어야 하는 DOM 항목과 표시되지 않아야 하는 DOM 요소 유형을 설명합니다.

이러한 모바일 작업 중 일부를 수행하기 위해 Cypress와 통합할 수 있는 많은 타사 플러그인이 있습니다. Cypress에서 직접 개발한 것이 아니라 오픈 소스 기여자가 개선하기 위해 개발한 것입니다.

Ionic Framework Cypress와 함께 사용하거나 통합할 수 있는 프레임워크 중 하나입니다. ionic 프레임워크는 왼쪽으로 스와이프, 오른쪽으로 스와이프 등과 같은 모바일 동작을 시뮬레이션하는 데 도움이 됩니다. Ionic Framework를 사용하면 앱 스토리지에 액세스하고 작업을 수행할 수도 있습니다.

위에서 본 것처럼 모바일 브라우저에서 Cypress 테스트를 실행하려면 약간의 작업이 필요할 수 있지만 효과적인 결과를 얻을 수 있습니다. 이 문서에 설명된 기술과 코드를 활용하면 Cypress의 많은 유용한 품질과 기능을 활용하여 모바일 브라우저에서 웹 사이트의 효율성을 확인할 수 있습니다.