Frontend/Cypress

fixture, 테스트에 사용될 미리 정의된 정적 데이터 파일

Fixture란?Fixture는 테스트에 사용될 미리 정의된 정적 데이터 파일이다.일반적으로 JSON 파일 형식으로 작성되며, cypress/fixtures 디렉토리에 저장된다.fixtures/example.json : 기본 예제 파일 삭제해도 됨  [Fixture 만들기] create-account// cypress\e2e\integration\create-account.cy.tsit("계정을 생성하고 로그인해야 합니다.", () => { // cypress를 이용해 request를 가로채기 (localhost:4000/graphql을 Intercept 하기) user.intercept("", (req) => { const { operationName } = req.body; if (op..

Custom Commands

로그인 되었는지 commands로 만들기  토큰 확인하는 부분 command 로 만들기// cypress/integration/auth/create-account.cy.ts it("계정을 생성하고 로그인해야 합니다.", () => { ... // 계정 생성 ... // 만든 계정으로 로그인 user.wait(2000); user.title().should("eq", "로그인 | Nuber Eats"); user.findByPlaceholderText("이메일").type("testClient16@mail.com"); user.findByPlaceholderText("비밀번호").type("123123"); user.findByRole("button").cli..

Intercept() : cypress를 이용해 request를 가로채는 법

cy.intercept란?cy.intercept는 네트워크 요청(예: XHR, Fetch API, GraphQL 등)을 가로채고 수정하거나, 해당 요청을 대체하여 지정된 데이터를 반환할 수 있도록 해주는 Cypress의 API이다.  주요 기능:네트워크 요청을 모니터링.요청을 차단하거나 수정.특정 요청에 대해 미리 정의된 응답을 제공.  // Specifying request and response typestype CustomRequest = { kind: 'custom_request'}type CustomResponse = { kind: 'custom_response'}cy.intercept(url, (req) => { req.body // .body of request will be of ty..

Cypress, 브라우저의 localStorage에 저장된 값을 검증하는 코드 테스트

describe("로그인", () => { const user = cy; it("양식을 작성하고 로그인해야 합니다.", () => { user.visit("/"); user.findByPlaceholderText("이메일").type("client@mail.com"); user.findByPlaceholderText("비밀번호").type("123123"); user .findByRole("button") .should("not.have.class", "pointer-events-none") .click(); user.window().its("localStorage.token-name").should("be.a", "string"); });});..