How to use reqNeedsBasicAuthHeaders method in Cypress

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

You can write something like:

cy.get('.grid > languagefield').invoke('text').then((txt) => {
  if (txt.trim() == 'American English') {
    //Do Something
  } else {
    //Do Something 
  }
})

OR, If you want to use each() to loop through the elements of the dropdown list and then find the text and perform some action, you can do something like:

cy.get('selctor').each(($el) => {
  if ($el.text().trim() == 'American English') {
    //Do Something
  } else {
    //Do Something 
  }
})

Depending on where you're executing your assertion, and due to Cypress' asynchronous nature, you may be trying to assert before expectedTimeOfTest is actually being assigned a value. You have one of two options:

1. Instead of a variable, assign expectedTimeOfTest to an alias: cy.wrap(JSON.stringify(json.SEQUENCE.timeoftest)).as("expectedTimeOfTest"); which you can then access by its alias as either this.expectedTimeOfTest or cy.get("@expectedTimeOfTest") later in your test.

If you go this route, do not use the arrow function for your then method, as aliases won't work with them. Instead use .then(function(){ //your code here})

     // Example of using function() vs arrow function.      
     cy.readFile(filePath + fileName).then(function(json){
        expect(json).to.be.an('object')
        cy.wrap(JSON.stringify(json.SEQUENCE.timeoftest)).as("expectedTimeOfTest");
      }); 

2. Include your assertion inside your .then() method.

The <br> tags become newlines after text extract

cy.get('.address')
  .invoke('text')
  .then(text => text.split('\n'))                // split by newline
  .then(texts => texts.map(text => text.trim()))  // trim whitespace
  .then(texts => texts.filter(text => text))     // remove empty
  .then(texts => {
    console.log(texts)
  })
})

prints

["Mr. Test User", "Testing Services Ltd", "Britannia House", "Rushmills", "NN4 7YB, Northampton", "Northamptonshire", "United Kingdom"]

Node.TEXT_NODE

Extracting the text nodes of the div is better if the content is more complicated.

• use .childNodes to get all <br> and texts within address <div>
• filter children by node type to remove <br>
• get node values and trim spaces and newlines

cy.get('.address')
  .then($el => $el[0].childNodes)  
  .then(children => [...children].filter(child => child.nodeType === Node.TEXT_NODE))
  .then(textNodes => textNodes.map(textNode => textNode.nodeValue.trim()))
  .then(texts => {
    console.log(texts)
  })

prints

["Mr. Test User", "Testing Services Ltd", "Britannia House", "Rushmills", "NN4 7YB, Northampton", "Northamptonshire", "United Kingdom"]

For the record, I found a great example here

Cypress examples (v9.4.1) - Form validation

<form id="form-validation" action="/action_page.php">
  <div>
    <label for="item">Item:</label>
    <input id="item" type="text" name="item" required />
  </div>

cy.get('#item:invalid')
  .invoke('prop', 'validationMessage')
  .should('equal', 'Please fill out this field.')

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.

From cypress.d.ts

interface Cypress {
  /**
   * Returns specific environment variable or undefined
   * @see https://on.cypress.io/env
   * @example
   *    // cypress.json
   *    { "env": { "foo": "bar" } }
   *    Cypress.env("foo") // => bar
  */
  env(key: string): any
}

so you can extend it with

declare namespace Cypress {
  interface Cypress {
    env(key: "example"): string
  }
}

which gives intellisense (method) Cypress.Cypress.env(key: "example"): string (+6 overloads)

Can you try this? May be the problem is because of javascript asynchronous nature, this is executed first:

const token = totp.generate();
console.log(token);
cy.findByLabelText("Jednorázový kód").type(token);

followed by:

const totp = new OTPAuth.TOTP({
  algorithm: "SHA1",
  digits: 6,
  period: 30,
  secret: getUrlVars(result.data)["secret"],
});

Hence token is coming as not defined. We have to use then() to basically tell cypress to run everything synchronously.

/// <reference types='Cypress' />
import {
  Decoder
} from "@nuintun/qrcode";
const qrcode = new Decoder();
const OTPAuth = require("otpauth");

import Navbar from "../page-objects/components/Navbar";
import UserProfileNav from "../page-objects/components/UserProfileNav";
import BasePage from "../page-objects/pages/BasePage";
import LoginPage from "../page-objects/pages/LoginPage";
import RegistrationPage from "../page-objects/pages/RegistrationPage";
import {
  createEmail,
  getUrlVars
} from "../utils/utils";

describe("test", () => {
  it("ttest", () => {
    cy.visit("/");
    LoginPage.login("test_1608122224686.kkvbvvks@mailosaur.io", "P@ssword1");
    Navbar.navigateToProfile();
    UserProfileNav.twoStepVerificationTab();

    cy.findAllByAltText("2FA QR kód").then(function($img) {
      qrcode.scan($img.prop("src")).then((result) => {
        const totp = new OTPAuth.TOTP({
          algorithm: "SHA1",
          digits: 6,
          period: 30,
          secret: getUrlVars(result.data)["secret"],
        }).then((totp) => {
          const token = totp.generate();
          console.log(token);
          cy.findByLabelText("Jednorázový kód").type(token);
        });
      });
    });
  });
});

For the simple problem of checking 'hello' doesn't exist, you can use .contain('hello') followed a .should(). So it would look something like this for the whole page:

// code to delete hello

cy.contains('.selector', 'hello').should('not.exist')

Or you can further narrow it down to a particular area of the app:

// code to delete hello

cy.get('.element-had-hello').should('not.include.text', 'hello')