如何在赛普拉斯中为特定的GraphQL请求添加别名? [英] How can I alias specific GraphQL requests in Cypress?

问题描述

在赛普拉斯中，

仔细阅读了文档，似乎没有一种方法可以使用请求正文中的 operationName 来为graphQL端点添加别名.我还将响应标题中的 operationName (黄色箭头)作为自定义属性返回；但是，我也没有设法找到一种使用它来别名特定的graphQL查询的方法.

失败的方法1::该方法尝试使用图片中显示的紫色箭头.

  cy.server();cy.route({方法:"POST"，网址:"/graphql"，onResponse(reqObj){如果(reqObj.request.body.operationName ==='editIpo'){cy.wrap('editIpo').as('graphqlEditIpo');}}，});cy.wait('@ graphqlEditIpo'); 

此方法不起作用，因为 graphqlEditIpo 别名是在运行时注册的，因此，我收到的错误如下.

CypressError:cy.wait()找不到"@graphqlEditIpo"的注册别名.可用的别名为:'ipoInitial，graphql'.

失败的方法2::该方法尝试使用图片中显示的黄色箭头.

  cy.server();cy.route({方法:"POST"，网址:"/graphql"，标头:{'operation-name':'editIpo'，}，}).as('graphql');cy.wait('graphql'); 

此方法不起作用，因为cy.route的options对象中的headers属性实际上是根据解决方案

6.0.0中引入的 intercept API通过请求处理程序函数支持此功能.我在代码中使用了它，如下所示:

  cy.intercept('POST'，'/graphql'，req => {如果(req.body.operationName ==='queryName'){req.alias ='queryName';}否则，如果(req.body.operationName ==='mutationName'){req.alias ='mutationName';}否则，如果(...){...}}); 

其中 queryName 和 mutationName 是您的GQL操作的名称.您可以为每个要别名的请求添加一个附加条件.然后，您可以像这样等待它们:

 //等待单个请求cy.wait('@ mutationName');//等待多个请求.//如果一次触发多个请求(例如在页面加载时)，则很有用.cy.wait(['@ queryName，@mutationName'，...]); 

文档在此处具有类似的示例: https://docs.cypress.io/api/commands/intercept.html#Aliasing-individual-requests .

In Cypress, it is well-documented that you can alias specific network requests, which you can then "wait" on. This is especially helpful if you want to do something in Cypress after a specific network request has fired and finished.

Example below from Cypress documentation:

cy.server()
cy.route('POST', '**/users').as('postUser') // ALIASING OCCURS HERE
cy.visit('/users')
cy.get('#first-name').type('Julius{enter}')
cy.wait('@postUser')

However, since I'm using GraphQL in my app, aliasing no longer becomes a straightforward affair. This is because all GraphQL queries share one endpoint /graphql.

Despite it not being possible to differentiate between different graphQL queries using the url endpoint alone, it is possible to differentiate graphQL queries using operationName (refer to following image).

Having dug through the documentation, there doesn't appear to be a way to alias graphQL endpoints using operationName from the request body. I'm also returning the operationName (yellow arrow) as a custom property in my response header; however, I haven't managed to find a way to use it to alias specific graphQL queries either.

FAILED METHOD 1: This method attempts to use the purple arrow shown in image.

cy.server();
cy.route({
    method: 'POST',
    url: '/graphql',
    onResponse(reqObj) {
        if (reqObj.request.body.operationName === 'editIpo') {
            cy.wrap('editIpo').as('graphqlEditIpo');
        }
    },
});
cy.wait('@graphqlEditIpo');

This method doesn't work since the graphqlEditIpo alias is registered at runtime and as such, the error I receive is as follows.

CypressError: cy.wait() could not find a registered alias for: '@graphqlEditIpo'. Available aliases are: 'ipoInitial, graphql'.

FAILED METHOD 2: This method attempts to use the yellow arrow shown in image.

cy.server();
cy.route({
    method: 'POST',
    url: '/graphql',
    headers: {
        'operation-name': 'editIpo',
    },
}).as('graphql');
cy.wait('graphql');

This method doesn't work because the headers property in the options object for cy.route is actually meant to accept response headers for stubbed routes per the docs. Here, I'm trying to use it to identify my specific graphQL query, which obviously won't work.

Which leads me to my question: How can I alias specific graphQL queries/mutations in Cypress? Have I missed something?

解决方案

The intercept API introduced in 6.0.0 supports this via the request handler function. I used it in my code like so:

cy.intercept('POST', '/graphql', req => {
  if (req.body.operationName === 'queryName') {
    req.alias = 'queryName';
  } else if (req.body.operationName === 'mutationName') {
    req.alias = 'mutationName';
  } else if (...) {
    ...
  }
});

Where queryName and mutationName are the names of your GQL operations. You can add an additional condition for each request that you would like to alias. You can then wait for them like so:

// Wait on single request
cy.wait('@mutationName');

// Wait on multiple requests. 
// Useful if several requests are fired at once, for example on page load. 
cy.wait(['@queryName, @mutationName',...]);

The docs have a similar example here: https://docs.cypress.io/api/commands/intercept.html#Aliasing-individual-requests.

这篇关于如何在赛普拉斯中为特定的GraphQL请求添加别名?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！