Cypress (10) .its, .invoke, .request, .within

Cypress 에서 유용한 메소드 4가지를 알아보자.

.its()

subject의 속성에 대해 접근할 때 사용한다.

cy.wrap(["Wai Yan", "Yu"]).its(1).should("eq", "Yu") // true
cy.wrap({ age: 52 }).its("age").should("eq", 52) // true

its docs

.invoke()

subject에서 JS함수를 호출 할 수 있다.

아래 예시는 JS 데이터 유형에 JS 함수를 호출한 예시이다.

beforeEach(() => {
  cy.intercept("GET", "/users").as("users")
})

it("slices the users returned from /users endpoint", () => {
  cy.wait("@users").its("response.body.results").invoke("slice", 0, 5)
  // ...
})

invoke docs

.request()

HTTP 요청을 만든다.

cy.request("POST", "http://localhost:8888/users/admin", { name: "Jane" }).then(
  (response) => {
    // response.body is automatically serialized into JSON
    expect(response.body).to.have.property("name", "Jane") // true
  }
)

request docs

.within()

form 과 같은 특정 요소 그룸 내 에서 작업할 때 요소내 범위를 지정 한다.

자식, 손자 등으로 드릴다운이 가능하다.

it("ensures the section lesson exists", () => {
  cy.getBySel("section-steps").within(() => {
    cy.getBySel("lesson-complete-0").should("exist")
  })
})