Cypress

cypress 설치

아래 명령어로 설치해준다.

yarn add --dev cypress

npm install cypress --save-dev

설치 후 pakage.json 의 실행 명령어에 아래와 같이 cypress를 추가해준다.

그러면 cypress 라는 폴더가 생성 되었을 텐데 typescript 로 cypress를 사용하기 위해서는 라는 tsconfig.json 파일을 만들어주어야 한다.
https://docs.cypress.io/guides/tooling/typescript-support - cypress 공식문서

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["es5", "dom"],
    "types": ["cypress", "node"]
  },
  "include": ["**/*.ts"]
}

아래의 명령어를 입력하면 실행이 되게 된다.

npx run cypress

아래는 테스트코드 중 가져온 것인데 원래 테스트는 test 와 it 을 사용할 수 있지만 cypress 에서는 test를 인식하지 못하기 때문에 it 으로 작성해야한다.

describe("로그인 화면", () => {
  it("사용자는 아이디와 비밀번호를 사용해서 로그인한다", () => {
    //given - 로그인 페이지에 접근한다
    cy.visit("/login");
    cy.get("[data-cy=emailInput]").as("emailInput");
    cy.get("[data-cy=passwordInput]").as("passwordInput");
    //when - 아이디와 비밀번호를
    cy.get("@emailInput").type("test@email.com");
    cy.get("@passwordInput").type("password");
    //then
  });
});

Cypress Queries

get() : Dom element를 가져온다.

as(aliasName , option) : 특정 이름으로 할당해준다.

invoke(options, functionName) : 함수를 호출해준다.

url(options) : 현재 페이지의 url 을 불러온다.

intercept() : 모킹을 위해 사용되며 네트워크 response 와 request 를 가로채는데 사용됨.
사용될 경우 요청이 서버로 가지 않음.