How to use validateStaticResponse method in Cypress

If what you want is to wait for a specific xhr you can do it making use of cy.route(). I use this in some scenarios and it is really useful. The general steps to use it are:

• cy.server()
• cy.route('GET','**/api/my-call/**').as('myXHR');
• Do things in the UI such as clicking on a button that will trigger such api calls
• cy.wait(@myXHR)

This way if such call isn't triggered your test will fail. You can find extensive documentation about this here

Code below will help you to stub window.open and further assert it that function has been triggered:

it('opens the about page', () => {
  cy.visit('/')
  cy.window().then(win => {
    cy.stub(win, 'open').as('Open')
  })
  cy.get('.your-selector').click()
  cy.get('@Open').should('have.been.calledOnceWithExactly', yourUrl)
})

You also can stub window.open in cy.on hook as you did, what helps you to yield new window object each time after page reload. However, if you want to actually open the new Url in existing tab instead of new one you can use this code below by passing "_self" param to overwrite old "_blank":

cy.window().then(win => {
          cy.stub(win, 'open').callsFake((url) => {
            return win.open.wrappedMethod.call(win, url, '_self');
          }).as('Open');
        });

callsFake function dynamically withdraws url which has been placed into original window.open(url, "_blank"), or you can manually change url inside .call(win, url, '_self'); with static one, so regardless on which link or button you clicked, which triggers window.open, they all will open the same url.

Try inverting/reversing your logic.

Get the element with the text, and then its tr parent:

cy.contains('Example Text').parent('.tr');

To answer straight, opening/ peeking the direct declaration of custom commands is not supported (May be, some one can correct if this supports). I would usually follow grouping of custom commands in separate files. For instance,

File: cypress/support/sample_command.ts

/// <reference types="Cypress" />

import * as PageElements from "../resources/selectors.json";
import * as Pages from "../resources/urls.json";

let xml: XMLDocument
let data: HTMLCollection

Cypress.Commands.add(
  "getWorkflowXML",
  (wfPath: string): Cypress.Chainable<HTMLCollection> => {
    var url = Cypress.env("url") + wfPath;

    return cy.request({
      log: true,
      url: url,
      auth: {
        user: Cypress.env("userName"),
        pass: Cypress.env("password")
      }
    }).then(response => {
      expect(response)
        .property("status")
        .to.equal(200);
      xml = Cypress.$.parseXML(response.body);
      data = xml.getElementsByTagName("java");
      return data;
    });
  }
);

declare global {
  namespace Cypress {
    interface Chainable {
      /**
       * Get Workflow XML through XHR call
       * @memberof Cypress.Chainable
       * @param wfPath
       */
      getWorkflowXML: (wfPath: string) => Cypress.Chainable<HTMLCollection>;
    }
  }
}

Then, in the the cypress/support/index.js file I would import the command file,

import './sample_command'

This way gives me better traceability, instead of declaring all the commands straight under index.d.ts.

Reference:

1. https://docs.cypress.io/api/cypress-api/custom-commands.html#Syntax
2. https://github.com/cypress-io/add-cypress-custom-command-in-typescript

After 2 hours of debugging I find out that I have forgotten to include Outline world in the Scenario definition in order the test to be able to iterate through the data table. So for future reference the fix from:

 Scenario: Some scenario
   Given ...
   When ...
   Then I should see "<task_field>" field as "<field_value>"
   Examples:
      | task_field        | field_value |
      | some_field1       | some_value1 |
      | some_field2       | some_value2 |
      | some_field3       | some_value3 | 

Is to include in the first line Outline:

Scenario Outline: Some scenario
   Given ...
   When ...
   Then I should see "<task_field>" field as "<field_value>"
   Examples:
      | task_field        | field_value |
      | some_field1       | some_value1 |
      | some_field2       | some_value2 |
      | some_field3       | some_value3 |

I think is been a long day for me. Hope this helps to someone with a similar issue!

The test works when setting form: false.

it.only('PUTs a request', () => {
  const url = 'http://localhost:3000/mythings/2'
  cy.request({
      method: 'PUT',
      url: url,
      form: false,
      body: {
        name: 'Name',
        subjects: []
      }
    })
    .then((response) => {
      expect(response.body).to.have.property('subjects');
      const {
        subjects
      } = response.body;
      expect(subjects.length).to.eq(0);
    });
})

I set up a local rest server with json-server to check out the behavior.

If I try to PUT a non-empty array with form: true

cy.request({
    method: 'PUT',
    url: url,
    form: true,
    body: {
      name: 'Name',
      subjects: ['x']
    }
  })

looking at db.json after the test has run, I see the item index migrating into the key,

"mythings": [
    {
        "name": "Name",
        "subjects[0]": "x",
        "id": 2
    }
],

so perhaps form means simple properties only.

Changing to form: false gives a proper array

{
  "mythings": [
    {
      "name": "Name",
      "subjects": ['x'],
      "id": 2
    }
  ],
}

which can then be emptied out by posting an empty array.

I ended up having to add react/jsx-runtime to external in the rollup.config.js

// rollup.config.js
import commonjs from 'rollup-plugin-commonjs';
import external from 'rollup-plugin-peer-deps-external';
import resolve from 'rollup-plugin-node-resolve';
import typescript from 'rollup-plugin-typescript2';

export default [
  {
    input: 'src/Icons/index.ts',
    output: [
      {
        file: 'src/Icons/dist/index.js',
        format: 'cjs',
        exports: 'named',
        sourcemap: true,
      },
      {
        file: 'src/Icons/dist/index.es.js',
        format: 'es',
        exports: 'named',
        sourcemap: true,
      },
    ],
    external: [ 'react', 'react-is', 'react-router', 'react/jsx-runtime' ],
    plugins: [
      external(),
      resolve(),
      typescript({
        rollupCommonJSResolveHack: true,
        exclude: ['**/__tests__/**', '**/*.stories.*'],
        clean: true,
      }),
      commonjs({
        include: /node_modules/,
        namedExports: {
          'node_modules/react-js/index.js': ['isValidElementType'],
        },
      }),
    ],
  },
];

Seems you're importing app variable on the test directly. This object is a different one than the one on your browser. You should make a global variable (or method) for getting your app variable directly from your browser

cy.window().its('app').then((app) => { 
   // your test with app var
})

Also you might want to use then() condition to ensure it checks it after. But this may not be necessary.

.click({ force: true }).then(() => {
   expect(displayMovieInfo).to.be.called;
});

You can also make use of the locator [data-refid="recordId"], invoke the href attribute and save it in a fixtures file.

cy.get('[data-refid="recordId"]').each(($ele) => {
    cy.writeFile('cypress/fixtures/links.txt', $ele.attr('href'), {
        flag: 'a+'
    })
})