cypress 설치와 간단한 테스트 예제 - 로그인

https://docs.cypress.io/guides/getting-started/installing-cypress 참고

1. cypress 설치

npm install cypress --save-dev

2. cypress 오픈

아래 명령어를 수행하고 VS Code등으로 확인해보면 왼쪽에 cypress 디렉터리가 생성되어 있을 확인할 수 있다.

./node_modules/.bin/cypress open

package.json script에 아래 내용을 추가한다.

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "cypress:open": "cypress open"
  },

이후 아래와 같이 cypress를 실행할 수 있다.

npm run cypress:open

개발 프로젝트 코드가 없는 곳, 개인로컬에서 작업할때
cypress 테스트할 디렉터리로 이동해서,
npm install cypress --save-dev
로 설치 후,
npx cypress open
로 cypress 실행

3. Cypress 테스트코드 작성해보기

js파일을 만든다.

파일 작성 규칙에 따라 파일명 오류가 있으면 연동이 안된다(이름.cy.js 형식으로 작성)

문법

describe
어떤 테스트코드인지 기술

beforeEach
테스트코드를 실행하기 전에 먼저 선행시켜야 하는 내용

it
테스트케이스 1개당 it에 매치됨

4. 간단히 로그인하는 기능 테스트 작성

//disco.cy.js

describe("example counter app", () => {
  beforeEach(() => {
    cy.visit("https://www.disco.re/");
    cy.get("#menu_btn").click();
  });

  it("로그인/로그아웃", () => {
    //로그인

    //given(준비)
    //when (사용자가 동작했을때)
    //then(이렇게 동작할것이다)

    if (cy.get(".sidebar-profile-name").should("have.value", "")) {
      cy.get("#sidebar_open_login_btn")
        .click()
        .then(() => {
          cy.get("#login_email").type("@@@@@");
          cy.get("#login_password").type("@@@");
          cy.wait(500);
          cy.get(".member-entry-submit-btn").click({
            multiple: true,
            force: true,
          });
        });
    } else {
      cy.get("#sidebar_logout_btn").click();
    }
  });
});

생각
cypress 사이프레스? 사이프러스?ㅎㅎ
예전에 CTO께서 cypress 추천한적이 있는데 팀에서 바쁘다는 이유로 pass;;ㅠㅠ
혼자서 사용법을 익혀보고 있다.
스탭바이스탭으로 진행해야 하는데 생각보다 설치가 간편하고 작성이 어렵지 않아 로그인테스트 해봐야지 하면서 스크립트를 작성해보았다.
if문을 쓰고 싶은데 어떻게 하지, null인지 체크 어떻게 하지 찾는게 조금 수고스럽긴하지만 좀 더 딥하게 사용해보고 싶다. 왜 추천했는지 알것 같은.. 표현식만 익히면 사용하기 편할것 같다.