Support for cypress 10

[fridjon]

Version 10 of cypress made substantial changes in the way plugins are used. Are there any plans to support cypress 10?

Would a pull request for that be welcome?

[th2tran]

I for one would certainly welcome it. 🙂
We're starting to migrate to 10 on my team. Have you found any breaking changes?

[fridjon]

@th2tran No I only started to look at this now, after cypress 10.

[kris-luminar]

It works fine in Cypress 10. You do have to put the code in cypress.config.js instead of support/ like you used to in Cypress 9. The code looks something like

const fs = require('fs');
const autoRecord = require('cypress-autorecord/plugin');
const { defineConfig } = require('cypress');
const interceptPatterns = [
    `.*api-${process.env.ENVIRONMENT}\\.example\\.com`,
    'google',
    'facebook',
    'amazonaws\\.com\\/static',
    'web-.*\\.studykiktest\\.com\\/corporate',
    'typekit',
    'static-assets\\.example\\.com',
    'graphql\\.example\\.com',
    'fonts\\.gstatic\\.com',
    'fontawesome\\.com.*'
];
const pattern = '/' + interceptPatterns.join('.*|.*') + '/';
module.exports = defineConfig({
    projectId: '****',
    autorecord: {
        interceptPattern: pattern,
        forceRecord: true
    },
    env: {
    },
    e2e: {
        setupNodeEvents(on, config) {
            autoRecord(on, config, fs);
            return config;
        }
    }
});

[indatawetrust]

@kris-luminar mock files are created correctly, but there are problems with their use. cy.intercept is not working correctly, request is still being sent to server. you can check via localhost backend logs

[theRenard]

doesn't work for me, catches just one endpoint call of backend API out of five.

[indatawetrust]

@theRenard you can change the createStubbedRoute function like this and use patch-package package. this change worked correctly for me. i will be glad if you try it and post the result

        cy.intercept(method, url, req => {
          const newResponse = sortedRoutes[method][url][index];

          if (newResponse.fixtureId) {
            req.reply({
              statusCode: newResponse.status,
              headers: newResponse.headers,
              fixture: `${fixturesFolderSubDirectory}/${newResponse.fixtureId}.json`,
            });
          } else {
            req.reply({
              statusCode: newResponse.status,
              headers: newResponse.headers,
              body: newResponse.response,
            });
          }

          if (sortedRoutes[method][url].length > index + 1) {
            index++;
          }
        });

npx patch-package cypress-autorecord

[theRenard]

Unfortunately it's not working, I suppose it works on your side when serving mocked data, in my case it just write an empty/partial mockup and it's also a bit random on the behavior. It seems that when there is no interceptPattern it saves all the requests...

cypress.config.ts

export default defineConfig({
  // @ts-ignore
  autorecord: {
    interceptPattern: "**/api/v1/**",
    // forceRecord: true,
    // cleanMocks: true,
  },...

test.cy.ts

import autoRecord from 'cypress-autorecord';

describe('Some Page', function () {
  autoRecord(); 
  it('has something', function () {
    cy.mockupLogin();
    cy.visit('/mypage');
    cy.get('.mb-2 > span.primary--text').should('exist');
  });
});

[indatawetrust]

Unfortunately it's not working, I suppose it works on your side when serving mocked data, in my case it just write an empty/partial mockup and it's also a bit random on the behavior. It seems that when there is no interceptPattern it saves all the requests...

cypress.config.ts

export default defineConfig({
  // @ts-ignore
  autorecord: {
    interceptPattern: "**/api/v1/**",
    // forceRecord: true,
    // cleanMocks: true,
  },...

test.cy.ts

import autoRecord from 'cypress-autorecord';

describe('Some Page', function () {
  autoRecord(); 
  it('has something', function () {
    cy.mockupLogin();
    cy.visit('/mypage');
    cy.get('.mb-2 > span.primary--text').should('exist');
  });
});

you can use intercept wait. maybe it will work https://docs.cypress.io/api/commands/intercept#Waiting-on-a-request

[indatawetrust]

I have published my changes for cypress 10 support as a package. it works correctly on the project I'm working on. You can try and write if you see any problem

https://github.com/indatawetrust/cypress-autorecord
https://www.npmjs.com/package/@cond/cypress-autorecord

[Sam152]

I needed this working in Cypress 10 and also needed a handful of other bug fixes and changes, instead of patching this project I created a new one here: https://github.com/Sam152/cypress-replay

I think the architecture is hopefully a little easier to understand.