Cypress (5) 리턴과 비동기 그리고 랩핑

Cypress return / yield

사이프레스는 서브젝트(subject)를 반환하지 않는다고 한다.

그래서 아래와 같은 방식으로는 사용이 불가능하다고 한다.

const button = cy.get('button')

button.click()

단, 상태가 변하는 객체일시에는 const 를 사용하여 변화를 감지한다.

// cypress test code
cy.get('[data-testid="num"]').then(($span) => {
  // capture what num is right now
  const num1 = parseFloat($span.text())

  cy.get('button')
    .click()
    .then(() => {
      // now capture it again
      const num2 = parseFloat($span.text())

      // make sure it's what we expected
      expect(num2).to.eq(num1 + 1)
    })
})

비동기

위에서 사이프레스는 서브젝트를 리턴 하지 않는다고 하였다. 그럼 어떻게 직접 상호작용하는가 ?
.then() 을 사용하여 가능하다.

JS에서의 .then()과 유사하지만 여기서의 then은 Promise가 아니다. 즉, cypress 내에서 async await 문법은 없다.

콜백 함수를 사용하며, 정의되지 않은 경우를 제외하고는 새로운 주제가 반환된다.

cy.get("button").then(($btn) => {
  const cls = $btn.attr("class")

  // ...
})

콜백내에서 undefined가 반환되면 다음 명령으로 넘어가버린다.
Promise와 마찬가지로 .then() 인터페이스가 있는 항목에서는 thenable을 반환할 수 있으며 해결될때까지 기다린다.

이미 JS 덕분에 익숙하다.

.wrap()

사이프레스의 .get() 은 제이쿼리의 선택자와 방식이 동일하다고 한다.
문서에서는 버튼을 선택했을때 콜백내에서는 객체를 반환받는다고 하는거 같고,
버튼에게 어떠한 컨텍스트(테스트 코드 블럭)을 제공하기 전에 랩핑하라고 나와있는데.. 이 부분은 아직 정확히는 이해가 가지 않는다.

우선 대충 이해한걸로는 .get 이 객체를 반환하고 그 객체에서 다이렉트로 클릭을 할 수 없기 때문에 이전에 랩핑을 하는거같고 .wrap 문서에서는 객체를 넣는다고 하니, 얼추 객체에 상호작용하기 위해서는 묶어준다라고 이해하고 있다.