我们如何忽略 cy.route() 请求发送中的 openHash 值

How can we ignore the openHash value in cy.route() request send

在 Cypress 中,我使用 cy.route() 发送以下请求,但 Cypress 未识别以下请求发送。在路由 url 中有一个 openHash 值,每个 POST 请求都会不同。有什么方法可以忽略 openHash 值或接受那里显示的任何值。

到目前为止,我已经尝试通过以下方式在路由中给出 url。

 url: '**/student/details.php?viewDetails=project&stdCount=1&sectionID=1&openHash=**',
 url: '**/student/details.php?viewDetails=project&stdCount=1&sectionID=1&openHash=**&ajaxCall=true**',

我相信在使用 cy.route() 时 POST url 需要完全匹配。有人可以请教

Cypress version: 5.4.0

Student.feature

Feature: Update student details

Background: User logged in to application
        Given I should load all of the routes required for tests

Scenario: Update student details
        When I am logged in as the student user
        And I click on "Student" subtab
        And I should see details displayed

Step definition:

import { Then, When, And } from "cypress-cucumber-preprocessor/steps";

before(() => {
  Then('I should load all of the routes required for tests', () => {
        cy.server();
        cy.route({
           method: 'POST',
           url: '**student/details.php?viewDetails=project&stdCount=1&sectionID=1&openHash=5fc8329a76e73&ajaxCall=true**',
           delay: 2000
        }).as('getStudentTabDetails');
    })
})   


Then('I am logged in as the student user', () => {
  cy.get('[name=loginUsername]').type("Student1");
  cy.get('[name=loginPassword]').type("somePassword1", { sensitive: true });
  cy.contains('Login').click();
})


Then('I click on {string} subtab', (student) => {
  cy.get('#main a').contains(student).click({force:true});
});
  
Then('I should see details displayed', () => {
  cy.wait('@getStudentTabDetails', { timeout: 5000 });
});
    

Error: 赛普拉斯错误 重试超时:cy.wait() 等待第一个路由请求 5000 毫秒超时:getStudentTabDetails。从未发生任何请求。

Cypress.minimatch是一个可以用来检查路由匹配器的工具。

By default Cypress uses minimatch to test glob patterns against request URLs.

If you’re struggling with writing the correct pattern you can iterate much faster by testing directly in your Developer Tools console.

你在问题中显示的两条路线实际上通过了小匹配测试。

const url = 'http://example/student/details.php?viewDetails=project&stdCount=1&sectionID=1&openHash=5fc8329a76e73&ajaxCall=true';

const pattern1 = '**/student/details.php?viewDetails=project&stdCount=1&sectionID=1&openHash=**';
console.log( Cypress.minimatch(url, pattern1) );  // true

const pattern2 = '**/student/details.php?viewDetails=project&stdCount=1&sectionID=1&openHash=**&ajaxCall=true**';
console.log( Cypress.minimatch(url, pattern2) );  // true

这里有一个 Cypress fiddle 展示了如何使用新的拦截方法来处理查询参数。

/// <reference types="@cypress/fiddle" />

const test = {
  html: `
    <p class="text-lg"></p>
    <script>
      setTimeout(() => {
        const url = 'http://example/student/details.php?viewDetails=project&stdCount=1&sectionID=1&openHash=5fc8329a76e73&ajaxCall=true';
        window.fetch(url, { method: 'POST'});
      }, 1000);
    </script>
  `,
  test: `
  cy.intercept({
    method: 'POST',
    url: '/student/details.php',
    query: {
      viewDetails: 'project',   // whatever query parts you care about
      stdCount: '1',
      sectionID: '1'
    }
  }, {})                 // Added an empty stub here, as my url does not actually exist
  .as('getStudentTabDetails');
  cy.wait('@getStudentTabDetails')
  `
}

it('', () => {
  cy.runExample(test)
});

POST 是使用本机 fetch() 制作的,如果不使用 [=16=,将无法在旧的 cy.route() 方法中捕获].