Javascript Cypress wait两次生成相同的URL
我有一个webapp,目前正在为它编写Cypress测试。我最近升级到了6.0版,其中包括新的Javascript Cypress wait两次生成相同的URL,javascript,typescript,cypress,Javascript,Typescript,Cypress,我有一个webapp,目前正在为它编写Cypress测试。我最近升级到了6.0版,其中包括新的cy.intercept()方法,它取代了cy.route()方法。然而,由于测试结果不一致,我在使用上遇到了问题 在我的页面上,当一个特定的输入变得模糊时,它向我的api发送一个请求,请求中包含它的值,并从中推断出一个结果 编写此测试的目的是在输入中写入第一个文本,模糊焦点,清除输入,然后写入另一个文本并模糊焦点。然后我应该有2个API调用,但是在第二次等待中,作业名称是错误的,因为url仍然是第一次
cy.intercept()
方法,它取代了cy.route()
方法。然而,由于测试结果不一致,我在使用上遇到了问题
在我的页面上,当一个特定的输入变得模糊时,它向我的api发送一个请求,请求中包含它的值,并从中推断出一个结果
编写此测试的目的是在输入中写入第一个文本,模糊焦点,清除输入,然后写入另一个文本并模糊焦点。然后我应该有2个API调用,但是在第二次等待中,作业名称是错误的,因为url仍然是第一次调用的url
但是,如果删除第一个cy.wait()
,则在第二个调用中会得到正确的url。有时测试通过,但如果我再次启动测试,它们就会失败
我错过什么了吗
beforeEach(() => {
cy.visit('/page');
cy.intercept(
'GET',
'https://my.api/jobs'
).as('sendJobName');
});
it('...', () => {
cy.getBySelector('myInput')
.type('Job name 1')
.focus()
.blur({ force: true })
.clear();
cy.wait('@sendJobName').then((interception) => {
const { url } = interception.request;
const { statusCode, body } = interception.response;
expect(url)
.to.be.a('string', 'url should be a string')
.and.satisfy(
(url: string) =>
url.endsWith(encodeURIComponent('Job name 1')),
'url should end with the right job'
);
expect(statusCode, 'first status should be 200').to.equal(200);
expect(
body,
'first body should correspond to first request'
).to.deep.equal([...]);
});
// Type a second valid job name
cy.getBySelector('myInput')
.type('Job name 2', { force: true })
.focus()
.blur({ force: true });
cy.wait('@sendJobName').then((interception) => {
const { url } = interception.request;
const { statusCode, body } = interception.response;
expect(url)
.to.be.a('string', 'url should be a string')
.and.satisfy(
(url: string) => url.endsWith(encodeURIComponent('Job name 2')),
'url should end with the right job'
); // This assertion fails
expect(statusCode, 'second status should be 200').to.equal(200);
expect(
body,
'second body should correspond to second request'
).to.deep.equal([...]);
});
});
如果输入文本作为基本URL的查询添加发送,则可以使用的变量指定请求的查询部分。有关示例,请参见。当然,您会添加两个截取,它们在查询参数上有所不同。非常感谢!这确实是一个更干净的解决方案,似乎已经解决了我的问题。你能回答这篇帖子吗?这样我就可以验证你的答案作为这个问题的答案了?没问题。需要知道查询的key:value对-显然,该值是键入的文本,但上面的key不明显。也许您可以添加一个答案,并显示截取记录的完整url。如果输入文本作为基本url的查询添加发送,您可以使用的变量指定请求的查询部分。有关示例,请参见。当然,您会添加两个截取,它们在查询参数上有所不同。非常感谢!这确实是一个更干净的解决方案,似乎已经解决了我的问题。你能回答这篇帖子吗?这样我就可以验证你的答案作为这个问题的答案了?没问题。需要知道查询的key:value对-显然,该值是键入的文本,但上面的key不明显。也许您可以添加一个答案,并显示截取记录的完整url。