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").click();
    user.window().its("localStorage.nuber-token").should("be.a", "string");
  });

 

 

// cypress/support/commands.ts

Cypress.Commands.add("assertLoggedIn", () => {
  cy.window().its("localStorage.nuber-token").should("be.a", "string");
});

• support/commands.js에서 나만의 command를 만들 수 있다.
• 로그인 되었는지를 확인하는 작업을 반복한다면 custom commands에 만들어 주면 된다.
• assertLoggedIn 네임명은 임의로 만들어주면 된다.
• Cypress에는 사용자 지정 명령을 만들고 기존 명령을 덮어쓸 수 있는 자체 API가 함께 제공된다.

 

 

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").click();
    user.assertLoggedIn();
  });

 

 

에러 확인

Argument of type '"assertLoggedIn"' is not assignable to parameter of type 'keyof Chainable<any>'.ts(2345)

• 이 오류는 TypeScript에서 Cypress.Commands.add의 첫 번째 인자가 Cypress의 기존 명령 체인에 없는 것으로 간주되기 때문에 발생한다.
• TypeScript는 keyof Chainable<any>로 타입을 검사하며, assertLoggedIn이 해당 타입에 정의되지 않았기 때문이다.
• 이를 해결하려면 사용자 정의 명령어를 TypeScript에서 Cypress의 명령어 체인에 추가해야 한다.

 

 

1. cypress.d.ts 파일 수정

// cypress/support/cypress.d.ts

declare namespace Cypress {
  interface Chainable<Subject> {
    /**
     * Custom command to assert the user is logged in.
     * @example cy.assertLoggedIn()
     */
    assertLoggedIn(): Chainable<Subject>;
  }
}

cypress/support 디렉토리 아래에 cypress.d.ts 파일을 추가하거나 기존 파일이 있으면 수정한다. 이 파일에서 Cypress 명령 체인을 확장할 수 있다.

 

 

2. tsconfig.json 파일 확인

{
  "compilerOptions": {
    "types": ["cypress"]
  },
  "include": [
    "cypress/**/*.ts"
  ]
}

Cypress 타입 정의를 인식하도록 tsconfig.json에 types 설정을 추가해야 한다.