Cypress (2) data 속성의 접근방식을 개선해보자.(커스텀 명령어)

저번 게시글에는 요소에 접근할때 class명이나 ID가 변경되는것을 고려해 data-set 등 data 속성을 통해 접근하는 코드를 보았다.

코드길이가 더 길어지는 신기한(?) 모습을 보았고 그걸 더 개선해보자.

우선 그전에 cypress 에서는 커스텀 명령을 만들 수 있다.

Custom Command

위 문서에서 나오듯 data-test 접근에 대한 명령을 만들고 적용해보자.

명령을 추가하려면 cypress/support/command.ts 파일에 추가해야한다.

// getByData라는 명령어 이름을 가지며, data-test 라는 data 속성으로 접근
Cypress.Commands.add("getByData", (selector) => {
  return cy.get(`[data-test=${selector}]`)
})

단, Typescript를 사용하는 경우 타입 오류가 발생한다.

자, 보고있던 문서와 현재 연습깃허브 코드가 다른 문제가 있어서 고쳐야 했다..

cypress/support/index.ts

import "./commands"

cypress/global.d.ts

/// <reference types="cypress" />

declare namespace Cypress {
  interface Chainable {
    /**
     *  Window object with additional properties used during test.
     */
    getByData(dataTestAttribute: string): Chainable<JQuery<HTMLElement>>
  }
}

위와 같이 파일을 추가해주고 코드를 넣어준다.

고치면서 느낀점은 global.d.ts에 추가하고자하는 명령어에 대한 타입을 적어주고, 명령의 상세 동작은 commands.ts 에서 정의를 해준다는걸 알게되었다.

자 그럼 추가한 명령어인 cy.getByData를 사용해보자..

cy.getByData("hero-heading")

describe("home page", () => {
  beforeEach(() => {
    // 기존 cy.visit의 중복코드를 줄였다.
    cy.visit("http://localhost:3000")
  })

  it("the h1 contains the correct text", () => {
    cy.getByData("hero-heading").contains(
      "Testing Next.js Applications with Cypress"
    ) // 기존 h1 선택방식에서 data-test 선택으로 방식 변경
  })

  //   it("the features on the homepage are correct", () => {
  //     cy.get("dt").eq(0).contains("4 Courses") // dt요소 중 0번째 요소 액세스 후 4 courses 텍스트 포함 확인
  //   })
})

잘 동작하는걸 볼 수 있을것이다.