Cypress로 한 번에 여러 확인란을 선택하는 방법

애플리케이션 섹션의 모든 확인란을 선택하려는 경우 .check() 명령을 한 번만 호출하여 Cypress 테스트에서 코드 중복을 제거하는 방법을 알아보세요. ☑️

나는 당신에 대해 모르지만 코드 복제를별로 좋아하지 않습니다. 그래서 오늘은 Cypress 테스트 자동화 프레임워크를 사용하여 확인란을 처리할 때 일부 중복을 제거하는 기술을 보여드리겠습니다.

예를 들어 정적 파일(HTML, CSS 및 배경 이미지)만 사용하여 만든 sample application을 사용하겠습니다.

Note: the app text is in Portuguese

이 애플리케이션에는 아래와 같이 Select the technologies you use(사용하는 기술 선택) 레이블이 있는 섹션이 있습니다.



모든 확인란이 div id 와 함께 check 에 포함되어 있으므로 다음과 같은 단일 명령으로 모두 확인할 수 있습니다.

// cypress/integration/checkboxes.spec.js

describe('Checkboxes', () => {
  beforeEach(() => {
    cy.visit('https://bit.ly/3vswFBe')
  })

  it('checks all checkboxes with one command', () => {
    cy.get('#check input[type="checkbox"]')
      .as('checkboxes')
      .check()

    cy.get('@checkboxes')
      .each(checkbox => {
        expect(checkbox[0].checked).to.equal(true)
      })
  })
})

그리고 .check()에 연결된 cy.get() 명령은 둘 이상의 확인란을 선택하므로 사용된 선택기가 단일 요소에 특정하지 않은 경우 모든 확인란이 선택됩니다.

이를 통해 새로운 cy.get() 를 가질 수 있습니다. 이번에는 이전에 생성된 별칭( '@checkboxes' )을 인수로 전달하여 모두 실제로 확인되었는지 확인할 수 있습니다.

쉬운 하?
.check() 기능에 대한 자세한 내용은 Cypress official docs을 참조하십시오.


이 "Pinch of Cypress"가 마음에 드셨습니까?

코멘트를 남겨주세요.


Cypress를 사용한 테스트 자동화에 대해 궁금하고 더 배우고 싶습니까? 나는 당신이 my Cypress courses on Udemy을 알 수 있기를 바랐습니다.

Testing Automation with Cypress - Basic

Testing Automation with Cypress - Intermediate

Testing Automation with Cypress - Advanced

Visual Regression Testing with Cypress and Percy - Basic


이 게시물은 원래 Talking About Testing 블로그에 포르투갈어로 게시되었습니다.


👋 다음 시간까지 즐거운 테스트 하세요!