[TIS] cypress intercept로 유연하게 api테스트 하기

cypress intercept로 유연하게 api테스트 하기

1.문제점

const prevPage = 5;
const nextPage = 6;

cy.intercept(
  `/search/issues?q=repo%3Acypress-io%2Fcypress+is%3Aissue&per_page=5&page=${nextPage}&sort=created`,
  {
    fixture: `searchIssuesResponses/cypress.json`,
  }
).as("getNextPage");

cy.intercept(
  `/search/issues?q=repo%3Acypress-io%2Fcypress+is%3Aissue&per_page=5&page=${prevPage}&sort=created`,
  {
    fixture: `searchIssuesResponses/cypress.json`,
  }
).as("getPrevPage");

cy.wait("@getFirstPage");

cypress의 intercept를 활용해 pagination을 테스팅 하였다.

만약 개발이 더욱 진행되어서 해당 path의 요청에 query parameter가 변경이 될 경우

위 코드를 다시 해당 query parameter에 맞게 다시 수정을 해주어야 한다.

💡

어떻게 하면 수정하지 않아도 되는 intercept 테스트를 작성할 수 있을까?

2.원인

`/search/issues?q=repo%3Acypress-io%2Fcypress+is%3Aissue&per_page=5&page=${nextPage}&sort=created`

문제의 원인은 바로 intercept의 인자가 유연하지 못한 url이다.

해당 요청 url과 동일할 경우에만 intercept가 통과된다.

인자로 들어가는 url을 유연하게 바꿔주어야 한다.

3.해결 방안

인자로 들어가는 url을 유연하게 바꿔줄려면 테스트하는 방식에 수정이 필요했다.

Before

기존에는 url을 활용해 intercept가 실행되면 통과 에서,

After

일단 해당 path로 요청된 url은 intercept로 통과 시킨 후

그 이후 url에 원하는 query parameter가 있는지 테스팅을 한다.

1. 해당 path로 요청한 url은 intercept로 통과시킨다.

url에는 glob pattern을 사용할 수 있다.

`/search/issues*` 로 변경하게 되면 /search/issues 로 요청하는 api는

cypress가 intercept한다.

cy.intercept(
  `/search/issues*`,
  {
    fixture: `searchIssuesResponses/cypress.json`,
  }
).as("getIssues");

2. url에 원하는 query parameter가 있는지 테스트한다.

cy.wait("@getIssues")
	.then(console.log)

intercept이후에 return이 되는 object가 무엇인지

확인하기 위해 먼저 console.log를 해보았다.

{
    "id": "interceptedRequest166",
    "browserRequestId": "83321.244",
    "routeId": "1673781470481-21",
    "request": {
        "headers": {
						......
        },
        "url": "https://api.github.com/search/issues?q=repo%3Acypress-io%2Fcypress+is%3Aissue&per_page=5&page=5&sort=created",
        "method": "GET",
						.......
        "query": {
            "q": "repo:cypress-io/cypress is:issue",
            "per_page": "5",
            "page": "5",
            "sort": "created"
        },
        "body": "",
        "responseTimeout": 30000
    },
    .....
}

다음과 같은 object를 전달한다.

cy.wait("@getIssues")
	.its("request.query.page")

its를 활용하면 해당 object의 원하는 property에 접근을 할 수 있다.

request.query.page에 접근하기 위해선 위처럼 작성하면 된다.

cy.wait("@getIssues")
	.its("request.query.page")
  .should("eq", `${prevPage}`);

마지막으로 should assertion을 활용해 값이 prevPage와 동일한지 테스트한다.

위처럼 테스트를 변경할 경우 query parameter가 추가되거나 변경이 되어도

해당 테스트를 수정하지 않아도 된다.

4.이를 통해 배운점

intercept를 활용해 api 테스트를 할경우 intercept의 매칭되는 url은 유연하게 작성하고

해당 요청을 접근해서 assertion을 하게 되면 변경에 유연한 테스팅을 작성할 수 있었다.

references

https://docs.cypress.io/guides/guides/network-requests

Uploaded by N2T