How to use testBinary method in Cypress

You can also use .hasClass('disabled') as there is a class disabled added. Also since there would multiple arrow buttons use an each instead of a then.

it('Validate the button is clickable', () => {
  cy.get('.arrow')
    .should('be.visible')
    .each(($btn) => {
      if ($btn.hasClass('disabled')) {
        cy.wrap($btn)
          .should('have.class', 'disabled')
          .and('have.css', 'background-color', 'rgb(62, 64, 69)')
        cy.log('Arrow is disabled and not clickable')
      } else {
        expect($btn).to.have.css('background-color', 'rgb(172, 42, 0)')
        cy.wrap($btn).click()
      }
    })
})

I think both answers are nearly there, this is what I have for src files:

const webpack = require('@cypress/webpack-preprocessor')
...
module.exports = defineConfig({
  ...
  e2e: {
    setupNodeEvents(on, config) {
      ...
      // @src alias
      const options = {
        webpackOptions: {             
          resolve: {                 
            alias: {                     
              '@src': path.resolve(__dirname, './src')              
            },             
          },         
        },     
        watchOptions: {},
      }
      on('file:preprocessor', webpack(options))
      ...

path.resolve() resolves a relative path into an absolute one, so you need to start the 2nd param with ./ or ../.

Also, don't use wildcard * in the path, you just need a single folder that will be substituted for the alias in the import statement.

If in doubt, check the folder returned (in the terminal)

module.exports = defineConfig({
  ...
  e2e: {
    setupNodeEvents(on, config) {
      const pagesFolder = path.resolve(__dirname, './cypress/pages')
      console.log('pagesFolder', pagesFolder)

See the Cypress documentation:

If your site embeds an <iframe> that is a cross-origin frame, Cypress will not be able to automate or communicate with this <iframe>.

Examples of uses for cross-origin iframes

• Embedding a Vimeo or YouTube video.
• Displaying a credit card form from Stripe or Braintree.
• Displaying an embedded login form from Auth0.
• Showing comments from Disqus.

It's actually possible for Cypress to accommodate these situations the same way Selenium does, but you will never have native access to these iframes from inside of Cypress.

As a workaround, you may be able to use window.postMessage to directly communicate with these iframes and control them (if the 3rd party iframe supports it).

Other than that, you'll have to wait for us to implement APIs to support this (check our open issue), or you can disable web security.

First you need to decide whether you're testing the UI or the system/engine the UI wraps around. Besides the missing ) after todo("buy milk", you are trying to test the engine not the UI.

In your case you should look into splitting the actual to do engine code from the UI layer. Then you can test CRUD of the to do.

Lets take a basic example:

    const Todo = function() {
        let list = [];
        let items = {};
        return {
            create: function(task) { 
                let id = Date.now();
                items[id] = { id, task };
                list.push(id);
                return id;
            },
            read: function(id) {
                return items[id];
            },
            readAll: function() {
                return list.map(id => items[id]);
            },
            delete: function(id) {
                list = list.filter(itemId => itemId !== id);
                delete items[id];
                return true;
            }
        }
    }

This is a testable todo engine and tests would look like this (using mocha and chai):

const { expect } = require("chai");
const Todo = require("./Todo.js"); // replace with your file

describe("Todo", function() {
    const todo = Todo();
    it("should create a todo item and return an ID", function() {
        let id = todo.create("My first todo");
        expect(id).to.be.a("integer");
    });
    it("should create a todo item with text 'My second todo'", function() {
        let id = todo.create("My second todo");
        let text = todo.read(id);
        expect(text).to.equal("My second todo");
    });
    it("should return an array with two todo items", function() {
        let items = todo.readAll();
        // you can also test for exact strings
        expect(items.length).to.equal(2);
    });
    it("should delete first item", function() {
        let items = todo.readAll();
        let id = items[0].id;
        todo.delete(id);
        items = todo.readAll();
        expect(items.length).to.equal(1);
    });
});

When you get to front-end testing, you will use a tool like Cypress or Puppeteer

Check out this plug-in for Cypress that will print all browser logs to stdout:

https://github.com/flotwig/cypress-log-to-output

It only works for Chrome, so just make sure your CI is set up to use Chrome and you're using Chrome locally too.

You can use the Cypress.config() command.

To get baseUrl value use Cypress.config().baseUrl or Cypress.config('baseUrl').

Short answer, yes.

Explanation:

From the cypress doc of get:

The querying behavior of this command matches exactly how $(…) works in jQuery.

and the answer to how jQuery works the order of $():

...So the final answer is that yes, I can use $('.myList li').each() and iterate through the list items in the order that they appear in the DOM.

Try adding this in support/index.js:

import './commands'
Cypress.on('uncaught:exception', (err, runnable) => {
  // returning false here prevents Cypress from failing the test
  return false
})

This should avoid the uncaught:exception in the click() method.

You can use mochawesome reporter to run to export the report. But the caveat is mochawesome when used alone generates individual reports which get overridden by the latest spec file that is run. In order to merge all the individual mochawesome reports, give a shot to mochawesome-merge which will combine all the test results and export it in HTML.

Towards that end,

1. Install mocha, mochawesome and mochawesome-merge (mochawesome has peer dependency on mocha)

npm install mocha
npm install mochawesome --save-dev
npm install mochawesome-merge --save-dev

2. In the cypress.json, paste the following config:

{
      "reporter": "mochawesome",
     "reporterOptions": {
       "charts": true,
       "overwrite": false,
       "html": false,
       "json": true,
       "reportDir": "cypress/report/mochawesome-report"
      }
    }

3. Run Cypress

npx cypress run --reporter mochawesome

4. Once all tests are run, merge the reports into a single one

npx mochawesome-merge cypress/report/mochawesome-report/*.json > cypress/report/output.json

5. Now convert the JSON into HTML

npx marge cypress/report/output.json --reportDir ./ --inline

6. Once the HTML report is generated, you will see something like this:

✓ Reports saved: E:\Project_Path\cypress\report\output.html