标签: cypress-intercept

测试 API 调用不会在 Cypress 中发生

我在我的应用程序中实现了 API 数据缓存,这样如果数据已经存在,就不会重新获取。

我可以拦截初始获取

cy.intercept('**/api/things').as('api');
cy.visit('/things')                      
cy.wait('@api')                         // passes
Run Code Online (Sandbox Code Playgroud)

为了测试缓存是否正常工作,我想明确地测试相反的情况。

如何修改cy.wait()类似于.should('not.exist')修改方式的行为cy.get()以允许负逻辑通过?

// data is cached from first route, how do I assert no call occurs?
cy.visit('/things2')                      
cy.wait('@api')                    
  .should('not.have.been.called')   // fails with "no calls were made"
Run Code Online (Sandbox Code Playgroud)

最小可重复示例

<body>
  <script>
    setTimeout(() => 
      fetch('https://jsonplaceholder.typicode.com/todos/1')
    }, 300)
  </script>
</body>
Run Code Online (Sandbox Code Playgroud)

由于我们测试的是阴性结果,因此首先使测试失败很有用。提供上面的 HTML 并使用它来确认测试失败,然后删除fetch(),测试应该通过。

cypress cypress-intercept

11
推荐指数
2
解决办法
3158
查看次数

是否有可能在 Cypress 中测试被阻止的网络请求?

我们的页面上有多个 API 请求。当调用失败时,某些行为是预期的。是否有可能如何在赛普拉斯中测试被阻止的网络请求?

request cypress cypress-intercept

7
推荐指数
1
解决办法
8621
查看次数

如果 Cypress 发出的请求没有与之关联的拦截,如何使 Cypress 测试失败?

如果 Cypress 发出的请求没有与之关联的拦截,如何使 Cypress 测试失败?

假设 cypress 导航到一个页面并发出 10 个请求。如果这些请求中的任何一个没有被拦截,我怎样才能让 cypress 自动失败。我不希望赛普拉斯提出的任何请求不被嘲笑。

这可能吗?

cypress cypress-intercept

6
推荐指数
1
解决办法
440
查看次数

当网络调用参数带有“/”时,Cypress拦截()失败

我需要为某些网络调用添加 cy.wait() ,该调用的参数中带有正斜杠。

例如:http ://example.com/myPage1?id=598dccc6&startDate=10/01/2023&endDate=11/01/2023

为此,我添加了以下拦截,

cy.intercept('http://example.com/myPage1**').as('myPage1');
Run Code Online (Sandbox Code Playgroud)

但是,cy.wait('@myPage1').its('response.statusCode').should('eq',200);超时并且测试用例失败。

我应该怎么办?

谢谢。


回复@agoff

不知怎的,这行不通。我的baseUrl就像是使用查询参数http://192.168.43.82/font-end/#/进行 api 调用http://192.168.43.82/rest/api/myPage

我试过了

cy.intercept(
          {
            pathname:'/rest/api/myPage',
            method:'POST'
        }).as('myPage');
Run Code Online (Sandbox Code Playgroud)

这是怎么回事?

cypress cypress-intercept

5
推荐指数
1
解决办法
341
查看次数

如何在 Cypress 测试中清除浏览器缓存

背景:

大家好,我正在尝试编写一个 Cypress 测试,该测试应该检查在单击图像本身后是否调用了图像 URL。

目前我运行测试,它在第一次运行时找到图像 URL,但是当重新运行时,测试无法找到它,因为图像已保存到浏览器缓存中。

有没有办法在每次 Cypress 测试之前清除浏览器缓存,以便在运行测试时始终调用/找到图像 URL?

目前的解决方案:

it('should request webp image format for zoomed pdp image', () => {
  cy.intercept(
    '**/cdn/cs/set/assets/blt2bd0405f3cb027cb/5005769.jpg?fit=bounds&format=webply&quality=80&width=1600&height=1600&dpr=1.5'
  ).as('zoomedImageRequest');
  cy.gotoPage('product/transparent-red-sorting-case-to-go-5005769');
  cy.get(pdp.pdpImage).click();
  cy.wait('@zoomedImageRequest').then((xhr) => {
    const zoomedImageUrl = xhr.response.url;
    expect(zoomedImageUrl).to.contain('format=webply');
  });
});
Run Code Online (Sandbox Code Playgroud)

javascript automated-tests cypress cypress-custom-commands cypress-intercept

4
推荐指数
1
解决办法
3753
查看次数

使用多个拦截器进行 Cypress 测试

我正在尝试编写 cypress 测试来检查数据是否从 API 接收到我的数据表中。

一项测试检查数据,另一项测试检查 API 中没有数据时是否有错误消息。

为了模拟 API 的响应(一种有数据,一种没有),我使用 cy.intercept()。

我似乎无法在我的单个测试文件中获得两个单独的拦截。

在同一个 cypress 测试文件中测试多个不同拦截的推荐程序是什么,或者它们应该在单独的文件中?

任何帮助表示赞赏!

    describe('Display Data Page', () => {

    beforeEach(() => {

        // Fake the backend Http response using the json file in our cypress fixtures folder.
        cy.intercept('GET', 'https://localhost:3000/GetData', {fixture:'my_data.json'}).as('my_data');

        cy.visit('/display-data');
        
    });

    it('Should display a list of my data', () => {

        cy.wait('@my_data');

        cy.get('.dataGrid').should('not.be.empty');
        cy.get('.dataGrid').should("contain", "Blah");
  
    });

    it('Should display a error message when api is offline', () => {

        // Reply with a HTTP 400 bad …
Run Code Online (Sandbox Code Playgroud)

cypress cypress-intercept

4
推荐指数
1
解决办法
452
查看次数

cypress 组件测试未捕获从我的 Vue3 组件发出的更新事件

我是组件测试和在赛普拉斯中使用间谍的新手,所以这可能是一个愚蠢的问题。

我有一个非常简单的组件,我正在测试它,当您在组件中进行选择时,选择会通过 modelValue 属性发送回父级。

我的组件在我的应用程序中工作(v-model 更新为选择的正确值就好),但我似乎无法在测试中捕获和验证它。

在我的组件内部,这是我执行发射的方式:

handleSelectionChange() {
  console.log("emitting update:modelValue= ", this.selectedOption);
  this.$emit('update:modelValue', this.selectedOption);
}, 
Run Code Online (Sandbox Code Playgroud)

控制台显示测试运行时值的变化,所以我认为这部分没问题。同样,当我在应用程序中使用该组件时,v-model 正在更新,因此我希望这不是问题。

我的Cypress 组件测试如下所示:

it.only('should emit an event when the value is changed', () => {
const mockData = ["one", "two", "three"];

cy.intercept('GET', '/v1/product', {
  statusCode: 200,
  body: mockData,
}).as('getProductData');

cy.mount(ProductPicker, {
  props: { modelValue: null },
  on: {
    'update:modelValue': cy.spy().as('updateModelValueSpy'),
  },
}).then(() => {
  cy.get('select').select('two');

  // Wait added as part of trouble shooting, hopefully not needed
  cy.wait(500); 

  // Ensure the …
Run Code Online (Sandbox Code Playgroud)

cypress cypress-component-test-runner cypress-intercept

3
推荐指数
1
解决办法
116
查看次数

如何更新现有拦截的夹具

我在每个之前添加了一个固定装置,现在我需要获取我在测试脚本中添加的同一固定装置文件的更新结果。这在赛普拉斯可能吗?谁能告诉我如果这种情况在赛普拉斯中是可能的,该如何正确地做到这一点?

context('Style File', () => {
  describe('Style File - Account Manager', () => {
    beforeEach(() => {
        
         cy.intercept("GET", "**/api/inquiries/*/style_file_sub_task_status", {

        fixture: "style_file_sub_task_status.json"

      }).as('getStyleFileSubTaskStatus');

    });

      it('Sub task Un-Approving', function () {

        cy.intercept("GET", "**/api/inquiries/*/style_file_sub_task_status", {

            fixture: "style_file_sub_task_status_already_approved.json"

         }).as('getStyleFileSubTaskStatus');

      cy.xpath('(//span[normalize-space()=\'Approved tech pack\'])[1]')
        .click();
      cy.get('#status').click();
      cy.findByText("Approved tech pack sub task status updated successfully")
        .should('be.visible');
    });


  });
});

Run Code Online (Sandbox Code Playgroud)

在上面的场景中,首先我在每个之前添加了(“style_file_sub_task_status.json”)固定装置,现在我需要获取在测试脚本中添加的相同路线和相同固定装置(“style_file_sub_task_status_already_approved.json”)的更新结果

automated-tests fixtures ui-automation cypress cypress-intercept

2
推荐指数
1
解决办法
257
查看次数

使用 cy.intercept 时捕获未处理的请求

有什么方法可以让 Cypress 捕获任何未使用cy.intercept处理和存根的请求。我希望 Cypress 返回一个有用的错误,以突出显示发出未存根请求的实例。目前它只是让这些请求通过,这没有什么帮助。

如果有一种方法可以保证处理程序是链中的最后一个处理程序,那么它的架构方式将允许使用一个包罗万象的处理程序,但看起来没有任何方法可以做到这一点。

javascript testing cypress cypress-intercept

2
推荐指数
1
解决办法
171
查看次数

在 cypress 中,如何拦截相同的 url 但具有不同的负载

我的应用程序正在从相同的 url 调用后端,但使用不同的有效负载。当 url 始终相同时,如何测试这些请求(仅有效负载不同)是使用 cypress 发出的?这是伊多的内容

const requests = ProductList.initialRequestList;
const aliases = [];

requests.forEach((request, index) => {
  cy.intercept('POST', `${baseUrl}${request.endpoint}`, (req) => {
    if (req.body.query && req.body.query === request.payload.query) {
      aliases.push(`@${request.payload.query}`);
    }
  }).as(request.payload.query);
});

cy.visit('/someurl');

cy.wait(aliases)
  .then(() => {
    aliases.forEach((alias, index) => {
      // aliases ok/different here
      console.log(alias);

      cy.get(alias)
        .then((interception: cy.intercept.Interception) => {
          // here not ok all the same
          console.log(interception.response.body.message);
        });
    });
  });
Run Code Online (Sandbox Code Playgroud)

cypress cypress-intercept

2
推荐指数
1
解决办法
348
查看次数