프론트 개발자 사이에서 Selenium을 제치고 많이 사용되고 있는 Cypress 에 관심이 가서 한 번 검토를 해 보고 기록으로 남긴다.

Cypress 의 설치

설치는 공식 홈페이지를 참조하였다.

Cypress 는 node 기반의 javascript로 구동되는 도구이다. 설치하려는 곳에 당연히 node는 설치되어있어야 한다.

node가 설치되어 있다는 전제하에 cypress의 로컬 설치는 다음과 같이 한다.

npm install cypress --save-dev

➜  cypress_test npm install cypress --save-dev

added 165 packages, and audited 166 packages in 6s

27 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

실행은 npx로 한다.

➜  npx cypress open

그럼 electron으로 만든 화면 하나가 뜨고 여기부터 스크립트 파일, 브라우저 선택 등을 해 나간다. 기본으로 설정을 마치면 선택된 브라우저를 통해 아래와 같은 화면이 나온다.

기본으로 생성되는 스크립트 spec.cy.js의 내용은 다음과 같다 .

describe('empty spec', () => {
  it('passes', () => {
    cy.visit('https://example.cypress.io')
  })
})

이제 이 자바스크립트 파일을 베이스로 실행되는 것은 알았는데 이 cypress의 커멘드를 전부 내가 작성을 해야 할 까?

스크립트의 레코딩

Selenium의 경우에는 브라우저 플러그인 형태로 레코딩 도구가 있다. cypress 도 있지 않을까 했는데 역시 있었다.

  • Chrome 브라우저 Cypress플러그인
    • Chrome 브라우저 플러그인은 코드가 생성이 되기는 하지만 현 버전 (v10)에는 맞지 않는 버전 이었다.
  • Cypress Studio
    • Cypress Studio라는 것도 Cypress.io에서 있었지만… v10부터는 이유는 알 수 없지만 삭제되었다고 한다.
  • DeploySentinel Recorder
    • 홈 페이지 부터 Cypress v10의 사용자들을 끌어들이겠다는 강한 의지가 보인다. 이를 검토해 보자

설치는 chrome확장 플러그인 형태도 있지만, Cypress플러그인 형태도 있다. 나는 Cypress 플러그인으로 선택했다. 홈페이지에서 “install Cypress Plugin”을 클릭하면 플러그인 설치 가이드가 나온다. 아까 Cypress 를 설치한 폴더로 가서 npm 으로 설치하도록 하겠다.

npm install -D @deploysentinel/cypress-recorder

그리고 cypress.config.js도 수정해야 한다.

const { defineConfig } = require("cypress");

module.exports = defineConfig({
  e2e: {
    setupNodeEvents(on, config) {
      // Add plugin import here 👇
      require("@deploysentinel/cypress-recorder")(on, config);
    },
  },
});

다시 Cypress를 띄우면 “Record” 라는 버튼이 좌측 상단에 생기는 것을 볼 수 있다.

이제 Record버튼을 눌러 동작들을 기록하면 그 결과가 cy스크립트로 발생한다. 스크립트를 복사하여 cypress에서 생성한 spec.cy.js 파일에 반영시키면 된다.

테스트 페이지에서 ‘type’를 클릭하고 이메일 폼에 내 이메일을 넣는 스크립트를 레코딩 했고 수행결과 완벽하게 동작함을 확인했다.