Cypress에서 브라우저의 권한을 다루는 방법

E2E테스트를 진행하는 도중에 위와 같이 browser의 권한 요청을 묻는 경우가 있어서 E2E테스트가 멈추는 상황이 발생하였습니다.

해결 방법은 다음과 같습니다.

yarn add cypress-browser-permissions -D

그리고 cypress/plugins/index.js에 아래와 같이 코드를 넣어줍니다.

const { cypressBrowserPermissionsPlugin } = require('cypress-browser-permissions')
/**
 * @type {Cypress.PluginConfig}
 */
module.exports = (on, config) => {
  // `on` is used to hook into various events Cypress emits
  // `config` is the resolved Cypress config
    config = cypressBrowserPermissionsPlugin(on, config);
    return config;
};

이제 우리는 Chrome, Edge, Firefox에서 Cypress 환경 변수로 권한에 접근할 수 있습니다. 여러분의 프로젝트에 권한을 주고 싶은 것을 골라서 cypress.json파일에 아래와 같이 추가하면 됩니다.

{
  "env": {
    "browserPermissions": {
      "notifications": "allow",
      "geolocation": "allow",
      "camera": "block",
      "microphone": "block",
      "images": "allow",
      "javascript": "allow",
      "popups": "ask",
      "plugins": "ask",
      "cookies": "allow"
    }
  }
}

그후 테스트코드를 아래처럼 작성해 주면 됩니다.

/// <reference types="Cypress"/>
import { isPermissionAllowed } from 'cypress-browser-permissions';

context('유저는 숙소를 등록할 수 있다.', () => {
  it('숙소의 위치를 설정하고 다음 페이지로 넘어갈 수 있다.', () => {
    expect(isPermissionAllowed('geolocation')).to.be.true;
    cy.contains('현재 위치 사용').click();
  });
});

아래와 같이 Cypress가 브라우저의 권한을 허용했고, 위치를 불러올 수 있었습니다.