[Cypress] Cypress Methods & Assertions정리

Cypress에서 주로 사용되는 Method의 기능설명 및 Assertions, 주 사용 기능 예제 대해 정리하였습니다.

 

1. Cypress Method

1. cy.visit(): 특정 URL에 대한 페이지 방문을 수행합니다.
2. cy.get(): DOM 요소를 선택하기 위해 사용되며, 선택자, 클래스, ID 등을 통해 요소를 찾습니다.
   - cy.get('[data-cy=Selector]')
3. .contains(): 텍스트를 기반으로 DOM 요소를 선택합니다. 해당 텍스트를 포함하는 요소를 찾습니다.
4. .type(): 텍스트 입력을 시뮬레이션하기 위해 사용됩니다. 입력 필드에 텍스트를 입력하는 동작을 수행합니다.
   - enter 키 입력 cy.get('[data-cy=search]').type({enter})
5. .click(): 요소를 클릭하는 동작을 수행합니다. 버튼, 링크 및 체크박스와 같은 대부분의 요소에 사용됩니다.
6. .submit(): 양식(form)을 제출합니다. 양식을 작성하고 제출하는 동작을 수행합니다.
7. cy.wait(): 특정 이벤트나 시간 지연을 기다리도록 Cypress를 지시합니다.
8. .should(): 특정 조건이 충족되는지 확인하기 위해 사용됩니다. DOM 요소의 상태를 확인하거나 특정 값과 비교하는 등의 검증을 수행할 수 있습니다.
9. cy.intercept(): 네트워크 요청을 가로채고 제어하는 동작을 수행합니다. 요청을 가로채서 응답을 수정하거나 모의 데이터를 반환할 수 있습니다.
10. .assert(): 주어진 조건이 참인지 확인하는 데 사용됩니다. 주어진 표현식이 참이 아니면 테스트가 실패합니다.
11. .clear(): value를 초기화 합니다.
12. .its(): 특정 요소의 특정 속성 값을 가져옵니다.
13. .within() : 특정 요소를 선택한 뒤 이후 cy 메소드의 범위를 선택한 요소 내부로 제한합니다.

2. Assertions 사용법

// 예제 1: 값의 동등성 검증
    .should('equal', 'Jane')
    expect(name).to.equal('Jane')

// 예제 2: 값의 포함 여부 검증
    .should('include', 2)
    expect([1,2,3]).to.include(2)

// 예제 3: 논리식을 통한 참/거짓 검증
    .should('be.true')
    expect(true).to.be.true

    .should('be.false')
    expect(false).to.be.false

// 예제 4: 패턴 검증
    .should('to.match', /^test/)
    expect('testing').to.match(/^test/)

// 예제 5: 속성 존재 여부 검증
    .should('have.property', 'name')
    expect(obj).to.have.property('name')

    //deep
    .should('have.deep.property', 'tests[1]', 'e2e')
    expect(deepObj).to.have.deep.property('tests[1]', 'e2e')

    //hasOwnProperty
    .should('have.ownProperty', 'length')
    expect('test').to.have.ownProperty('length')

// 예제 6: 길이 검증
    .should('have.lengthOf', 4)
    expect('test').to.have.lengthOf(4)

// 예제 7: 함수 호출 여부 검증
    .should('have.been.called')
    expect(spy).to.be.called

// 예제 8: 예외 발생 여부 검증
    .should('throw', Error)
    expect(fn).to.throw(Error)

// 예제 10: 문자열 포함 여부 검증
    .should('have.string', 'test')
    expect('testing').to.have.string('test')

3. Get vs Find vs Within

// 예제 코드
<div class="test-title">cy.get vs .find vs .within</div>
<section id="comparison">
  <div class="feature">Both are querying commands</div>
</section>

// get은 각각의 셀렉터에 해당되는 전체 요소를 찾습니다.
// test-title Class 및 feature Class 의 div를 찾습니다. 
cy.get('#comparison')
  .get('div')
  .should('have.class', 'test-title') // ok
  .and('have.class', 'feature') // ok
  
// find는 #comparison 내부에서 div를 찾습니다.
// 그래서 feature Class만 찾을 수 있습니다.
cy.get('#comparison')
  .find('div')
  .should('have.length', 1) // ok
  .and('have.class', 'feature') // ok
  
// within은 #comparison 내부로만 범위를 축소시킵니다.
cy.get('#comparison').within(($el)=>{
  cy.wrap($el)
  .get('div')
  .should('have.class', 'test-title') // error
  .and('have.class', 'feature') // ok
})

4. Alias 사용법

cy.get('a').as('links')
cy.get('@links').first().click()

5. Select Box 사용법

<select>
  <option value="456">apples</option>
  <option value="457">oranges</option>
  <option value="458">bananas</option>
</select>

// check trigger 
cy.get('select').check('456')

// text
cy.get('select').select('apples').should('have.value', '456')
// value
cy.get('select').select('456').should('have.value', '456')
// index
cy.get('select').select(0).should('have.value', '456')

6. Check Box 사용법

<form>
  <input type="radio" id="ca-country" value="CA" />
  <label for="ca-country">Canada</label>
  <input type="radio" id="us-country" value="US" />
  <label for="us-country">United States</label>
</form>

// check trigger
cy.get('form input').check(['subscribe', 'accept'])

// Find checked option
cy.get('#pick-fruit :checked').should('be.checked').and('have.value', 'apple')

 

참고사이트
https://docs.cypress.io/