How to use getLernaPackages method in Cypress

Just like Alex mentioned in the comment, you cannot return a value from cy commands. But you can do so in the .then block just like:

 it("should have text of 'Backpack'", () => {

  // I have changed the selector since the class name in your HTML is ".inventory_item_name" not ".inventory_item_price"
  cy.get(".inventory_item_name").then(($el) => {
    const text = $el.text(); // Now you have the text "Backpack"

    // Do the assertion here
    expect(text).to.eq("Backpack");
  });
});

You can learn more about why Cypress doesn't return value in this documentation

In the Cypress Docs there are two ways described how you can handle those JSON files from the fixtures folder: https://docs.cypress.io/api/commands/fixture#Examples

1. Option

Load your testdata.json using cy.fixture():

cy.fixture('testdata.json').as('testdata');

2. Option (my recommendation)

In your login.spec.js you can import all relevant json files from your fixtures folder:

import testdata from '../fixtures/testdata.json';

You can then directly use them as follows to for example use the username and password for the first user:

  it.only('TC03 - Login with valid data as subscriber', () => {
    cy.login(testdata[0].username, testdata[0].password);                            
    cy.title().should('equal', 'Home');
    cy.logout();
  })

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.

Cypress has an event called url:changed. See doc on Events here

Using this, something like this may work:

context("Workflow", () => {
    it("login", () => {

        cy.on('url:changed', url => {
            cy.location('hash').then(hash => {
                if (!url.endsWith(hash)) {
                    cy.visit(url);
                }
            });
        });

        cy.visit("http://localhost:3000/src/#login")
        cy.get("#username").type("demo").should("have.value", "demouser")
        cy.get("#password").type("demo{enter}").should("have.value", "demo") // this should redirect to "/#home"
        cy.get(".subtitle").should("have.value", "Welcome") //this line fails as ".subtitle" is an element of "/#home"

    })
})

Edit: just for troubleshooting purposes and to focus on your issue, can you try it like this without cy.location():

context("Workflow", () => {
    it("login", () => {

        cy.on('url:changed', url => {
            cy.visit(url);
        });

        cy.visit("http://localhost:3000/src/#login")
        cy.get("#username").type("demo").should("have.value", "demouser")
        cy.get("#password").type("demo{enter}").should("have.value", "demo") // this should redirect to "/#home"
        cy.get(".subtitle").should("have.value", "Welcome") //this line fails as ".subtitle" is an element of "/#home"

    })
})

Edit: Have you tried cy.reload()

context("Workflow", () => {

    it("login", () => {

        cy.visit("http://localhost:3000/src/#login")
        cy.get("#username").type("demo").should("have.value", "demouser")
        cy.get("#password").type("demo{enter}").should("have.value", "demo") // this should redirect to "/#home"
        cy.reload();
        cy.get(".subtitle").should("have.value", "Welcome");
    })
})

The answer to your question is in the error message:

If you do not want status codes to cause failures pass the option: 'failOnStatusCode: false'

So pass failOnStatusCode: false to not fail on bad status codes:

    cy.request({
        method: 'POST',
        url: 'https://myrAPI',
        failOnStatusCode: false,
        auth:
        {
            username: 'user@user',
            password: 'user123',
        },
        headers:
        {
            'Authorization': 'Basic dXNlckB1c2VyOnVzZXI=',
            'Content-Type': 'text/plain'
        }
    })

Using invoke('val') instead of invoke('text') worked for my case.

Reminder of the html tag

<input type="text" class="form-control" name="email">

Cypress code

cy.get('input[name="email"]')
  .invoke('val')
  .then(sometext => cy.log(sometext));

For me, it is better to transform the big json before testing.

The response has this nesting

{
  data: {
    count: 252655,
    aggregations: {
      "filters.bodyTypes": {
         doc_count_error_upper_bound: 0,
         sum_other_doc_count: 0,
         buckets: [
           {
             key: "Station wagon",
             doc_count: 45778,
           },

but that makes the test code harder to figure out.

Start by pulling out the aggregations with this function

(response) => {
  return response.body.data.aggregations['filters.bodyTypes'].buckets
}

You can then check things like the number of bodyTypes

cy.request({
  method: 'POST',
  ...
})
.then(response => {
  return response.body.data.aggregations['filters.bodyTypes'].buckets
})
.then(bodyTypeObjects => {
  expect(bodyTypeObjects.length).to.eq(90)
})

To check individual items, you need to deconstruct the bodyTypeObjects, e.g

const match = Cypress._.filter(bodyTypeObjects, Cypress._.matches({key: 'Station Wagon'}))
expect(match).to.have.length(1)

but to make the test code simpler, do another transform from this shape

[{key: 'Station wagon', doc_count: 45778}, {key: 'SUV', doc_count: 30188}, ...] 

to this shape

{ Station wagon: 45778, SUV: 30188, ... }

Then the tests become a lot simpler

Full test

cy.request({
  method: 'POST',
  ...
})
.then(response => {
  return response.body.data.aggregations['filters.bodyTypes'].buckets
})
.then(bodyTypeObjects => {

  expect(bodyTypeObjects.length).to.eq(90)

  const bodyTypeCounts = bodyTypeObjects.reduce((acc, bodyTypeObject) => {
    acc[bodyTypeObject.key] = bodyTypeObject.doc_count
    return acc
  }, {})
  return bodyTypeCounts
})
.then(bodyTypeCounts => {

  expect(bodyTypeCounts).to.have.property('Station Wagon')
  expect(bodyTypeCounts['Station Wagon']).to.be.gt(1000)

  // OR

  cy.wrap(bodyTypeCounts)
    .should('have.property', 'Station Wagon', 1673)

})

I think you need to have a look as this repo: https://github.com/cypress-io/cypress-example-recipes/tree/master/examples/fundamentals__dynamic-tests Or just search this site, this is not the first time someone has asked this very question.

In general, you can wrap your it in a loop. In practice, it'd look e.g. like this:

const testData = [
    {
        name: 'Name1',
        password: 'Pass1'
    },
    {
        name: 'Name2',
        password: 'Pass2'
    },
    {
        name: 'Name3',
        password: 'Pass3'
    }
]

testData.forEach((credentials) => {
    it('example test', () => {
        getOnDefaultForm.typeUserName(credentials.name);
        getOnDefaultForm.typePassword(credentials.password);
        getOnDefaultForm.clickSubmit();
    })
});

Solved by adding custom chainable interface to support folder

declare namespace Cypress {
  interface Chainable {
    createInbox(): Chainable<any>;
    waitForLatestEmail(inboxId: number): Chainable<any>;
  }
}