How to use convertSameSiteExtensionToCdp method in Cypress

You can target the data attribute directly. Here's how the code would look like:

cy.get('[data-icon="times"]')

This would yield the element with a data-icon attribute of "times".

You could be even more specific by explicitly targeting only svg elements with that data attribute like so:

cy.get('svg[data-icon="times"]')

Here's the section of the docs for more reading.

An example is given here Get Data URL of an image, but the image url is out of date - I substituted the one from Cypress Github page.

Key is to add encoding to the request

cy.request({
  url: 'https://cloud.githubusercontent.com/assets/1268976/20607953/d7ae489c-b24a-11e6-9cc4-91c6c74c5e88.png',
  encoding: 'base64',
}).then((response) => {

  // test any response properties here

  const base64Content = response.body
  const mime = response.headers['content-type'] // or 'image/png'
  expect(mime).to.eq('image/png')

  // see https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs
  const imageDataUrl = `data:${mime};base64,${base64Content}`
  return imageDataUrl
})
.then((imageDataUrl) => {

  // display the image in Cypress test runner

  cy.window().its('document.body')
  .then($body => {
    $body[0].innerHTML = `<img src="${imageDataUrl}"  height="100" width="300" />`
  })
})

I'm not sure you already resolved this, but I leave my solution for other

cy.get('.bg-cover')
  .should('have.css', 'background-image')
  .and('include', 'myimage.png')

From comments, shadow DOM is present. You can access elements within it either by adding this to cypress.json

{
  "includeShadowDom": true
}

or in the test

cy.get('widgets-bms-scoreboard')
  .shadow()
  .find('.dropdown-arrow').click()

Start with a fix to cypress.json

{
  "env": {
    "links": {
      "staging": "https://staginglink",
      "live": "https://livelink"
    }
    "users": {
      "user1": {"username": "username1", "password" : "password1"},
      "user2": {"username": "username2", "password" : "password2"},
    }
}

Calling with string parameters:

cy.login('live', 'user2')  

Command:

Cypress.Commands.add("login", (requiredEnv, requiredUser) => {

  const links = Cypress.env('links');  // links section above
  const link = links[requiredEnv];     // if passed "live" or "staging", gives the
                                       // correct property of links section
  cy.visit(link)

  const users = Cypress.env('users');    // users section above
  const user = users[requiredUser];          

  const username = user.username;  // "user1" -> gives "username1"
                                   // "user2" -> gives "username2"

  const password = user.password;  // "user1" -> gives "password1"
                                   // "user2" -> gives "password2"

  cy.get('input[name="Parameter.UserName"]').type(username)  // don't put quotes around variable
  cy.get('input[name="Parameter.Password"]').type(password)  // don't put quotes around variable
  cy.contains('Login').click()
})

You can return false to break early, see docs.

Return early
You can stop the .each() loop early by returning false in the callback function.

Tested with cypress fiddle

const selectMySection = {
  html: `
    <div class="myclass">
      <span id="myid">
        <p>child of span1</p>
        <p>child of span2</p>
        span text - find this
      </span>
    </div>
    <div class="myclass">
      <span id="myid">
        <p>child of span3</p>
        <p>child of span4</p>
        span text - ignore this
      </span>
    </div>
  `,
  test: `
    cy.get('div.myclass span#myid')
      .each(($span, i) => {
        console.log('processing span #', i); // only logs 'processing span # 0'
        const text = Cypress.$($span).text()
        if (text.includes('span text - find this')) {
          cy.wrap($span)
            .parent('div.myclass')  // move to parent
            .as('mySection')
          return false;
        }
      })

    cy.get('@mySection')
      .then(x => console.log(x))
  `
}
it('test selectMySection', () => {
  cy.runExample(selectMySection)
})

An alternative to looping is to use .contains('my text') to target the text you want.
Note that .contains() does a partial match, so you can ignore child texts.

cy.get('div.myclass span#myid')
  .contains('span text - find this')
  .as('mySection')

So both, the use across several steps of the same scenario, as well as scenario overlapping are possible with Cypress using Cucumber Preprocessor.

1. Use of values across multiple steps of the same scenario

Referring to the example from the question, the Order_Id can be defined outside the steps and is thus accessible in the global scope from all steps. If I understood the code correctly, it would be something like this (probably unnecessary code commented out):

let Order_id;

Then("Get Data from page", () => {
  cy.get(".os-order-number").invoke("text").then(($Oid) => {
    let Order = $Oid.text();
    Order_id = Order.replace(/[^0-9]/g, "");
    // cy.wrap(Order_id).as("Orderinfo");
  });
});


Given("Go to Login", () => {
  cy.visit("https://dev.simplifyshopping.com/register/");
});

When("Paste variable here", () => {
  cy.wait(2000);
  // cy.wait("@Orderinfo")
  // cy.get("@Orderinfo")).then((Orderinfo) => {
  //  console.log(Orderinfo);
  //  cy.get("#id_email").type(Orderinfo);
  // });

  console.log(Order_id);
  cy.get("#id_email").type(Order_id);
});

2. Use of values across scenarios (hold state across tests)

To make certain values accessible across the execution of different scenarios, for example, a helper.js file can be created containing the following code:

export const stateStore = {};

Inside your step definition files, you can then import the stateStore and fill it with values as you like:

import { Given, When } from 'cypress-cucumber-preprocessor/steps';
import { stateStore } from '../helpers';

// step used in first scenario
Given('some value is made available in scenario 1', () => {
  stateStore.someValue = 'this is a value';
});

// step used in second scenario
When('this value can be used in another step of scneario 2', () => {
  console.log(`Print some value: ${stateStore.someValue}`);
});

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

Is failing because you have this assertion .should('have.attr', 'target') before this invocation .invoke('removeAttr', 'target').

this will work

 cy.get(`${sitestovisit.searchBoxFormID} > form`)
   .invoke('removeAttr', 'target')

And.. if you need to see if the target attribute exist before deleting it I would do this.

  cy
      .get(`${sitestovisit.searchBoxFormID} > form`)
      .should('have.attr', 'target')

  cy
       .get(`${sitestovisit.searchBoxFormID} > form`)
       .invoke('removeAttr', 'target')