Cypress (9) browser, viewport test

브라우저별 테스트

Cypress 에서 Chromium기반(크롬, 엣지, 일렉트론) 및 Firefox를 지원한다.

UI를 통해 실행 브라우저를 선택할 수 있고, CLI로도 가능하다.

cypress run --browser Firefox

브라우저벼로 테스트를 하려면 옵션을 넣는다.

// Run the test if Cypress is running
// using the built-in Electron browser
it('has access to clipboard', { browser: 'electron' }, () => {
  ...
})

// Run the test if Cypress is run via Firefox
it('Download extension in Firefox', { browser: 'firefox' }, () => {
  // ...
})

// Run the test if Cypress is run via Chrome
it('Show warning outside Chrome', { browser: 'chrome' }, () => {
  // ...
})

cross browser testing

문서를 통해 욥션객체에 대해 자세히 볼 수 있다.

모바일 테스트

package.json 내 CLI 옵션을 확인할 수 있다.

"cypress:open:mobile": "cypress open --config viewportWidth=375,viewportHeight=667",
"cypress:run:mobile": "cypress run --config viewportWidth=375,viewportHeight=667",

스크립트 내용에 보인다. width 와 height를 지정할 수 있다.

또한, 모바일 뷰포트에 실행되었는지 확인하는 isMobile() 유틸리티 함수가 있다.

방식은 아래와 같다.

export const isMobile = () => {
  return (
    Cypress.config("viewportWidth") <
    Cypress.env("mobileViewportWidthBreakpoint")
  )
}

여기서 mobileViewportWidthBreakpoin는 cypress.json 구성 파일 내에 있다.

{
  // ...

  "env": {
    "apiUrl": "http://localhost:3001",
    "mobileViewportWidthBreakpoint": 414, // mobileViewportWidthBreakpoin
    "coverage": false,
    "codeCoverage": {
      "url": "http://localhost:3001/__coverage__"
    }
  },
  "experimentalStudio": true
}

그래서 모바일인지 확인하고 그에 맞게 조건을 처리할 수 있다.

it("should remember a user for 30 days after login", () => {
  cy.database("find", "users").then((user: User) => {
    cy.login(user.username, "s3cret", { rememberUser: true })
  })

  // Verify Session Cookie
  cy.getCookie("connect.sid").should("have.property", "expiry")

  // Logout User
  if (isMobile()) { // mobile 확인
    cy.getBySel("sidenav-toggle").click()
  }
  cy.getBySel("sidenav-signout").click()
  cy.location("pathname").should("eq", "/signin")
  cy.visualSnapshot("Redirect to SignIn")
})