我们怎么能忽略cy.route()请求发送中的openHash值呢

Question

在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:CypressError重试超时：cy.wait((等待路由的第一个请求超时5000ms：getStudentTabDetails。从未发生任何请求。

Answer 1

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

默认情况下，Cypress使用minimatch根据请求URL测试glob模式。

如果你正在努力编写正确的模式，你可以通过直接在开发者工具控制台中测试来更快地迭代。

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

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，展示了如何使用新的intercept方法来处理查询参数。

/// <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((生成的，如果不使用polyfill，在旧的cy.route()方法中就无法捕获它。