How to use this.openProject.initializeConfig method in Cypress

EDIT:

After a debugging session, the issue with module with ID: main not found was simply resolved by changing Webpack AureliaPlugin to its simplest form:

plugins: [
  new AureliaPlugin()
]

As the built code is in a format that Webpack can understand easily, no need for any configuration.

Also, it'd be easier for debugging. if configure function in main is wrapped in a try catch, or catch(ex =>) of promise, so you can see any issues coming up, instead of a silently fail and a forever loading screen.

With the latest release of dialog, you should not have to manually include ModuleDependenciesPlugin for dialog anymore, as it uses dynamic import API, which is understood by Webpack naturally. So I would suggest going back to your original one, and delete that configuration.

new ModuleDependenciesPlugin({
    'aurelia-testing': ['./compile-spy', './view-spy'],
    // "aurelia-dialog": ['./aurelia-dialog', './ux-dialog-header', './ux-dialog-body', './ux-dialog-footer', './attach-focus']
})

cy.log() is not great for debugging purposes, the general form for messages is name (left column) and description (right column). Anything nested gets abbreviated.

Try stringifying

cy.log(JSON.stringify(headerArray))

or joining

cy.log(headerArray.join(', '))

or if you just want to debug use console

console.log(headerArray)

The other reason why cy.log() is not good for this, the code as shown will log an empty array.

The cy.log() takes value of headerArray before the commands run so you must use a .then()

const headerArray = []
cy.iframe("#courses-iframe").find(".nav-outer > .main-menu > .navbar-collapse > ul > li")
  .each(($row, index, $rows) => {
    headerArray.push($row.text())
  })
  .then(() => {
    cy.log(headerArray)
  })

Yes, it is possible. In this case, there can be scenarios that you can run concurrently and there can be scenarios you need to run sequentially. I'll add the solution which I found for both problems.

For this, we need the package.json file. ( If you don't have it do an npm init ) and it will guide you through making the pachage.json

Then let's say we have two test files 1 can be run concurrently, and the other one should not be executed concurrently. let's name them as concurrently.js and sequentially.js

To run the tests sequentially ad your cypress command inside the scripts JSON object. Ex:

  "scripts": {
    "cy:sequence:chrome": "cypress run --browser chrome --spec **/sequentially.js",
    "cy:sequence:firefox": "cypress run --browser firefox --spec **/sequentially.js",
  }

Now you just need to run npm run command to sequence execution, in this case, it will be

npm run cy:sequence:chrome && npm run cy:sequence:firefox

Then if you need concurrent execution, we need to add an npm package [concurently][1]

You can install it with npm i concurrently Now like we did before we need to add the concurrently.js execution commands to scripts. Here we are using the concurrently package notations to add it. ( check the above URL )

so our final scripts package looks like,

  "scripts": {
    "cy.concurent:run" : "concurrently \"cypress run --browser chrome --spec **/concurrently.js\" \"cypress run --browser firefox --spec **/concurrently.js\"",
    "cy:sequence:chrome": "cypress run --browser chrome --spec **/sequentially.js",
    "cy:sequence:firefox": "cypress run --browser firefox --spec **/sequentially.js",
  }

if the above addition is not clear, we need to add the commands as quotes with concurrently word being the first word. it should be like

"concurrently "command1" "command2" "

Now if you need to run the tests concurrently in multiple browsers, you just need to run

npm run cy.concurent:run

My only doubt is about the reporting, you might need to add an additional config to save browser-specific videos and reports. If not it might save the data of last execution.

Hope this helps, Cheers. [1]: https://www.npmjs.com/package/concurrently

The problem with reducing the delay { delay: 0 } is that it's there to throttle the char stream in case some event handler or validation can't handle the highest rate.

Also, if I test with the simplest input, no javascript attached

<input maxlength="2000">

the test takes 37 seconds with default delay of 10ms, but is still 24 seconds with delay of 0.

I would recommend setting 2000 chars via the val() method and type the last

cy.get('input')
  .invoke('val', stringGen(2000))  // set 2000 chars
  .type('!')                       // add another
  .invoke('val')                   // read the value
  .should('have.length', 2000)     // confirm the last did not go in

This runs in 0.6 seconds

If you have some javascript event handlers, you would need to trigger them after setting the initial 2000 chars

.trigger('change')

or

.trigger('input')

RichTextEditor

A rich text editor using <div> to hold the text can be pre-loaded with the text() method instead of the val() method.

You will also need to identify the div that receives the text.

For example react-quill uses the class ql-editor on it's primary div.

cy.get('div.ql-editor')
  .invoke('text', stringGen(2000))  // set 2000 chars
  .type('!')                        // add another
  .invoke('text')                   // read the value
  .should('have.length', 2000)      // confirm the last did not go in

Timings for react-quill

{ delay: 10 } (default) 32 seconds
{ delay: 0 } 18 seconds
preload the text 1.5 seconds

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;
    },
  });
};

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')

Now cy.server is deprecated, you can use cy.intercept instead:

cy.intercept('http://api.company.com/', (req) => {
  req.headers['authorization'] = `token ${token}`
})

More info in the docs.

You probably just want to make a .type() variation

Cypress.Commands.add('typeIfNotEmpty', { prevSubject: true }, (subject, textToType) => {
  if (textToType) {
   cy.wrap(subject).type(textToType)
  }
  return subject  // allow further chaining
})

cy.get('#username')
  .typeIfNotEmpty(username)
  .should(...)               // some assertion on '#username' element

If I understand correctly, these are XPath and selector equivalents (https://example.org/ happens to have a similar DOM structure):

'use strict';

const puppeteer = require('puppeteer');

(async function main() {
  try {
    const browser = await puppeteer.launch();
    const [page] = await browser.pages();

    await page.goto('https://example.org/');

    const [elemByXPath] = await page.$x('//div[h1[contains(., "Example Domain")]]//a');

    const elemBySelector = await page.evaluateHandle(
      () => [...document.querySelectorAll('div')]
              .find(
                div => [...div.querySelectorAll('h1')]
                         .some(h1 => h1.innerText.includes('Example Domain'))
              )
              .querySelector('a')
    );

    console.log(elemByXPath.toString());
    console.log(elemBySelector.toString());

    await browser.close();
  } catch (err) {
    console.error(err);
  }
})();