Как я могу создать псевдоним для конкретных запросов GraphQL в Cypress?

Если «ожидание», а не «псевдоним» само по себе является основной целью, самый простой способ сделать это, как я уже встречал, - это сопоставление общих запросов graphql с последующим вызовом рекурсивной функции для нацеливания на «ожидание». только что созданный псевдоним, пока вы не найдете конкретную операцию graphql, которую искали. например

Cypress.Commands.add('waitFor', operationName => {
  cy.wait('@graphqlRequest').then(({ request }) => {
    if (request.body.operationName !== operationName) {
      return cy.waitFor(operationName)
    }
  })
})

Это, конечно, имеет свои недостатки и может работать, а может и не работать в вашем контексте. Но у нас это работает.

Я надеюсь, что Cypress позволит в будущем сделать это менее опасным способом.

PS. Я хочу отдать должное тому, откуда я черпал вдохновение, но, похоже, это потеряно в киберпространстве.

Поскольку у меня была такая же проблема, и я не нашел реального решения для этой проблемы, я объединил разные варианты и создал обходной путь, который решает мою проблему. Надеюсь, это поможет и кому-то другому.

На самом деле я не «жду» выполнения запроса, но я ловлю их всех на основе URL-адреса **/graphql и сопоставляю имя операции в запросе. При совпадении будет выполнена функция с данными в качестве параметра. В этой функции можно определить тесты.

graphQLResponse.js

export const onGraphQLResponse = (resolvers, args) => {
    resolvers.forEach((n) => {
        const operationName = Object.keys(n).shift();
        const nextFn = n[operationName];

        if (args.request.body.operationName === operationName) {
            handleGraphQLResponse(nextFn)(args.response)(operationName);
        }
    });
};

const handleGraphQLResponse = (next) => {
    return (response) => {

        const responseBody = Cypress._.get(response, "body");

        return async (alias) => {
            await Cypress.Blob.blobToBase64String(responseBody)
                .then((blobResponse) => atob(blobResponse))
                .then((jsonString) => JSON.parse(jsonString))
                .then((jsonResponse) => {
                    Cypress.log({
                        name: "wait blob",
                        displayName: `Wait ${alias}`,
                        consoleProps: () => {
                            return jsonResponse.data;
                        }
                    }).end();

                    return jsonResponse.data;
                })
                .then((data) => {
                    next(data);
                });
        };
    };
};

В тестовом файле

Свяжите массив с объектами, где ключ - это имя_операции, а значение - функция разрешения.

import { onGraphQLResponse } from "./util/graphQLResponse";

describe("Foo and Bar", function() {
    it("Should be able to test GraphQL response data", () => {
        cy.server();

        cy.route({
            method: "POST",
            url: "**/graphql",
            onResponse: onGraphQLResponse.bind(null, [
                {"some operationName": testResponse},
                {"some other operationName": testOtherResponse}
            ])
        }).as("graphql");

        cy.visit("");

        function testResponse(result) {
            const foo = result.foo;
            expect(foo.label).to.equal("Foo label");
        }

        function testOtherResponse(result) {
            const bar = result.bar;
            expect(bar.label).to.equal("Bar label");
        }
    });
}

Кредиты

Использовал команду blob из glebbahmutov.com

У меня это работает!

Cypress.Commands.add('waitForGraph', operationName => {
  const GRAPH_URL = '/api/v2/graph/';
  cy.route('POST', GRAPH_URL).as("graphqlRequest");
  //This will capture every request
  cy.wait('@graphqlRequest').then(({ request }) => {
    // If the captured request doesn't match the operation name of your query
    // it will wait again for the next one until it gets matched.
    if (request.body.operationName !== operationName) {
      return cy.waitForGraph(operationName)
    }
  })
})

Просто не забудьте писать свои запросы с уникальными именами, насколько это возможно, потому что имя операции зависит от этого.

Я использовал некоторые из этих примеров кода, но мне пришлось немного изменить его, чтобы добавить параметр onRequest в cy.route, а также добавить дату. Теперь (можно добавить любой автоматический инкрементер, открытый для других решений по этому поводу), чтобы разрешить несколько вызовов то же имя операции GraphQL в том же тесте. Спасибо, что указали мне правильное направление!

Cypress.Commands.add('waitForGraph', (operationName) => {
  const now = Date.now()
  let operationNameFromRequest
  cy.route({
    method: 'POST',
    url: '**graphql',
    onRequest: (xhr) => {
      operationNameFromRequest = xhr.request.body.operationName
    },
  }).as(`graphqlRequest${now}`)

  //This will capture every request
  cy.wait(`@graphqlRequest${now}`).then(({ xhr }) => {
    // If the captured request doesn't match the operation name of your query
    // it will wait again for the next one until it gets matched.
    if (operationNameFromRequest !== operationName) {
      return cy.waitForGraph(operationName)
    }
  })
})

использовать:

cy.waitForGraph('QueryAllOrganizations').then((xhr) => { ...

Вот как мне удалось различить каждый запрос GraphQL. Мы используем кипарис-огурец-препроцессор, поэтому у нас есть файл common.js в / кипарисовик / интеграция / общий /, где мы можем вызвать ловушки до и beforeEach, которые вызываются перед любым файлом функций.

Я пробовал решения здесь, но не смог придумать что-то стабильное, поскольку в нашем приложении многие запросы GraphQL запускаются одновременно для некоторых действий.

В итоге я хранил все запросы GraphQL в глобальном объекте под названием graphql_accumulator с отметкой времени для каждого случая.

Тогда было проще управлять индивидуальным запросом с помощью команды cypress должен.

common.js:

beforeEach(() => {
  for (const query in graphql_accumulator) {
    delete graphql_accumulator[query];
  }

  cy.server();
  cy.route({
    method: 'POST',
    url: '**/graphql',
    onResponse(xhr) {
      const queryName = xhr.requestBody.get('query').trim().split(/[({ ]/)[1];
      if (!(queryName in graphql_accumulator)) graphql_accumulator[queryName] = [];
      graphql_accumulator[queryName].push({timeStamp: nowStamp('HHmmssSS'), data: xhr.responseBody.data})
    }
  });
});

Мне нужно извлечь queryName из FormData, поскольку у нас (пока) нет ключа operationName в заголовке запроса, но вы могли бы использовать этот ключ именно здесь.

commands.js

Cypress.Commands.add('waitGraphQL', {prevSubject:false}, (queryName) => {
  Cypress.log({
    displayName: 'wait gql',
    consoleProps() {
      return {
        'graphQL Accumulator': graphql_accumulator
      }
    }
  });
  const timeMark = nowStamp('HHmmssSS');
  cy.wrap(graphql_accumulator, {log:false}).should('have.property', queryName)
    .and("satisfy", responses => responses.some(response => response['timeStamp'] >= timeMark));
});

Также важно разрешить cypress управлять запросами GraphQL, добавив эти настройки в /cypress/support/index.js:

Cypress.on('window:before:load', win => {
  // unfilters incoming GraphQL requests in cypress so we can see them in the UI
  // and track them with cy.server; cy.route
  win.fetch = null;
  win.Blob = null; // Avoid Blob format for GraphQL responses
});

Я использую это так:

cy.waitGraphQL('QueryChannelConfigs');
cy.get(button_edit_market).click();

cy.waitGraphQL будет ждать последнего целевого запроса, который будет сохранен после вызова.

Надеюсь это поможет.

Наш вариант использования включал несколько вызовов GraphQL на одной странице. Нам пришлось использовать модифицированную версию ответов сверху:

Cypress.Commands.add('createGql', operation => {
    cy.route({
        method: 'POST',
        url: '**/graphql',
    }).as(operation);
});

Cypress.Commands.add('waitForGql', (operation, nextOperation) => {
    cy.wait(`@${operation}`).then(({ request }) => {
        if (request.body.operationName !== operation) {
            return cy.waitForGql(operation);
        }

        cy.route({
            method: 'POST',
            url: '**/graphql',
        }).as(nextOperation || 'gqlRequest');
    });
});

Проблема в том, что ВСЕ запросы GraphQL используют один и тот же URL-адрес, поэтому, как только вы создадите cy.route() для одного запроса GraphQL, Cypress сопоставит с ним все следующие запросы GraphQL. После совпадения мы устанавливаем для cy.route() только метку по умолчанию gqlRequest или следующий запрос.

Наш тест:

cy.get(someSelector)
  .should('be.visible')
  .type(someText)
  .createGql('gqlOperation1')
  .waitForGql('gqlOperation1', 'gqlOperation2') // Create next cy.route() for the next query, or it won't match
  .get(someSelector2)
  .should('be.visible')
  .click();

cy.waitForGql('gqlOperation2')
  .get(someSelector3)
  .should('be.visible')
  .click();

Где-то еще этот метод был предложен.

Между прочим, все станет немного проще, если вы воспользуетесь методом перейти на Cypress v5.x и использовать новый маршрут (route2).

Это то, что вы ищете (новое в Cypress 5.6.0):

cy.route2('POST', '/graphql', (req) => {
  if (req.body.includes('operationName')) {
    req.alias = 'gqlMutation'
  }
})

// assert that a matching request has been made
cy.wait('@gqlMutation')

Документация: https://docs.cypress.io/api/commands/route2.html#Waiting-on-a-request

Надеюсь, это поможет!

API intercept, представленный в 6.0.0, поддерживает это через функцию обработчика запросов. Я использовал это в своем коде так:

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

Где queryName и mutationName - названия ваших операций GQL. Вы можете добавить дополнительное условие для каждого запроса, которому вы хотите присвоить псевдоним. Затем вы можете подождать их так:

// 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',...]);

В документации есть аналогичный пример здесь: https://docs.cypress.io/api/commands/intercept.html#Aliasing-individual-requests.