Cypress - 모바일 테스트

cypress 반응형 테스트

웹개발을 진행하다보면 다양한 기기 사이즈에 맞춰서 반응형을 작업해야하는 경우가 많다.

사이즈가 줄어들어 css 깨져버리거나 보기에 불편한 경우가 많다.

 

일반적으로 css로만 적절히 조정하는 경우에는 테스트가 필요하지않겠지만

아예 화면이 변경되는 경우에는 직접 조정하며 테스트를 해야할 경우도 많다.

 

cypress에서는 반응형 테스트를 위한 viewport 지정도 지원하므로 손쉽게 반응형 테스트가 가능하다.

viewport를 사용하여 다양한 반응형 테스트가 가능하다

• visible 테스트 → should(’be.visible’)
• css 테스트 → should(’have.css’)

cy.viewport('macbook-15') //직접 기기로 뷰포트 변경도되며
cy.viewport(320, 480) //특정 width, height 값으로도 가능

cy.get('.draft > :nth-child(1) > p').should('have.css', 'text-overflow', 'ellipsis')

기본값, 아이폰 , 삼성으로 주로 테스트하는 편이다

cy.get('.list > ul').should('be.visible')

cy.viewport('iphone-6+')
cy.wait(200)
cy.get('.list > ul').should('not.be.visible')

cy.viewport('samsung-s10')
cy.wait(200)
cy.get('.list > ul').should('not.be.visible')

Cypress vieport 참고하기

 

1. Cypress로 e2e 테스트 코드 작성하기 - 시작하기

2. Cypress 파일 업로드테스트