How to use utils.copyExtension method in Cypress

IMHO the cleanest way is not to use waits nor timeouts with get, this is kinda an antipattern.

I would recommend to use Cypress waitUntil command and use something like:

 cy.waitUntil(function() {
  return cy.get('element').should('not.exist');
 })

or depending on the app code you can use not.be.visible.

I also did the following which also worked:

cy.wait('@redeemVoucher').should(({request, response}) => {
  expect(response.statusCode).to.eq(200);

  cy.request({
    method: 'POST',
    url: request.url,
    failOnStatusCode: false,
    headers: {
      'Content-Type': 'application/json; charset=utf-8'
    }}).should((response) => {
      expect(response.status).to.eq(400);
      expect(response.body.errors[0].message).to.eq('Voucher cannot be redeemed: ' + voucherCode);
  });
});

At last, I have figured out the answer.
I have added the below code in the wrong location and that was the reason it fails and returned the above error.
Now I have corrected the location and added under plugins/index.js and works perfectly.

I've also made a small change, ie I added return null since I didn't have anything to return in my case.

// In my spec file;

cy.task('copycsvFile');

// added below code under.. /plugins/index.js

const fs = require('fs');
    
module.exports = (on) => {
  on("task", {
    copycsvFile: (Obj) => {
      var fs = require("fs");
      fs.createReadStream(
        "C:/Users/SomeName/Downloads/Export_Survey_CSV.csv"
      ).pipe(
        fs.createWriteStream(
          "C:/User/Client/Client - Cypress Web UI Tests/cypress/fixtures/Export_Survey_CSV.csv"
        )
      );
      return null;
    },
  });
};

Accessing new windows via Cypress is intentionally not supported.

However, there are many ways this functionality can be tested in Cypress now. You can split up your tests into separate pieces and still have confidence that your application is covered.

1. Write a test to check that when performing the action in your app, the window.open event is called by using cy.spy() to listen for a window.open event.

cy.visit('http://localhost:3000', {
  onBeforeLoad(win) {
    cy.stub(win, 'open')
  }
})

// Do the action in your app like cy.get('.open-window-btn').click()

cy.window().its('open').should('be.called')

2. In a new test, use cy.visit() to go to the url that would have opened in the new window, fill in the fields and click the buttons like you would in a Cypress test.

cy.visit('http://localhost:3000/new-window')

// Do the actions you want to test in the new window

Fully working test example can be found here.

Edit: Since the reference didn`t work I suggest approaching it with an allias

const savedVariableCallback = (variable) =>
    console.log(`Variable saved ${variable}`);

describe(() => {
...
    it("Sample input type", () => {
        cy.fixture("example.json").then(({ email }) => {
            actionsPage
                .selectSampleInput()
                .then((input) => {
                    checkAmountOfElements(input, 1);
                    checkVisiblity(input);
                })
                .type(email)
                .then((input) => {
                    checkIfValue(input, email);

                    let fixValue = "Nice work";
                    savedVariableCallback(fixValue);
                    cy.wrap(fixValue).as('fixValue')
                });
        });
        cy.get('@fixValue')
            .then(fixValue => {
                cy.log(`fixValue is: ${fixValue.value}`);
            })
    });
})

Finally, I find the way to do it. Although Cypress doesn't provide such a feature, but since Cypress uses Chai, we can just define Chai methods.

Note: it's not possible to define have.text.trimmed, since assertion method text is a Chai method. rather than a chainable method, there is no way to provide a trimmed after it.

But there are still two options:

1. Define a Chai method textTrimmed. It allows us using .should('have.textTrimmed', 'sometext'), which is preferred since we can define a custom assertion message and no tricky hacking on jQuery instances.

2. Define a Chai chainable method trimmed. It allows using .should('have.trimmed.text', 'sometext'), which seems to work, but the assertion is determined by the Chai method text, which may be confusion. It is not recommended.

have.textTrimmed

This is in TypeScript:

chai.Assertion.addMethod('textTrimmed', function (expectedString: string) {
  const $element = this._obj;

  new chai.Assertion($element).to.be.exist;

  const actual = $element.text().trim();
  const expected = expectedString.trim();
  this.assert(
    actual === expected
    , ' Expected #{this} to have text #{exp} after trimmed, but the text was #{act} after trimmed'
    , 'expected #{this} not to have text #{exp} after trimmed'
    , expected
    , actual
  );
});

Put the code in cypress/support/index.js file to make sure running it before tests.

You may want to see the complete demo here: https://github.com/freewind-demos/typescript-cypress-add-custom-assertion-method-textTrimmed-demo/blob/master/cypress/support/textTrimmed.ts

File have.trimmed.text

chai.use((chai, utils) => {

  chai.Assertion.addChainableMethod("trimmed", () => {
  }, function () {
    const obj = utils.flag(this, 'object')

    const oldText = obj.text.bind(obj);
    obj.text = () => {
      return oldText().trim()
    }
  });
})

As I said, it's not recommended because of the tricky hack and unclear assertion message.

You can also see the complete demo here: https://github.com/freewind-demos/typescript-cypress-custom-operator-have-trimmed-text-demo/blob/master/cypress/support/index.ts

You can achieve what you want using the chai-colors assertion plugin.

Install as follows:

npm install chai-colors

Then add this to your code:

import chaiColors from 'chai-colors'
chai.use(chaiColors)

Or this, as applicable:

var chaiColors = require('chai-colors');    
chai.use(chaiColors);

Now you can write your assertion like this:

cy.get('#button-login')
  .should('have.css', 'background-color')
  .and('be.colored', '#6a7ba3')

This code is incorrect,

Cypress.on('window:before:load', win => {
  window.foo.abc = true;
});

It should be

Cypress.on('window:before:load', win => {
  win.foo.abc = true;
});

You don't have to use it in before(), but it should be at the top of the spec.

But I suspect it still won't work after correcting, most likely the app resets foo to a new object during loading, i.e during cy.visit()

You can use the 2nd block

cy.visit('...')  // visit before changing

cy.window().then(win => {
  win.foo.abc = true;            // correct the syntax here as well
})

I think you're looking for --spec path/to/folder/*.js

You can run all the tests in a folder, or even in all subfolders of a folder,

ex/ npx cypress run --spec cypress/integration/subsetA/**/*-spec.js

would run all .js specs in all folders under the "subsetA" folder in cypress/integration.

So in your case: npx cypress run --spec cypress/integration/apps/smhw-qa/**/*-spec.js should do the trick.

https://docs.cypress.io/guides/guides/command-line.html#How-to-run-commands