How to use render method in Cypress

I guess you need to enter npx cypress open if you are running for first time. once the project is created then you can use npx cypress run

I'm not sure about timeout in Cypress's custom commands, but you could use a workaround by passing a default param into your custom command like so:

Cypress.Commands.add("login", (waitTimer = 1000) => {
  Auth.signIn(username, password)
    .then(() => {
        cy.wait(waitTimer);
        console.log('Programmatically logged in as ' + username);
    })
    .catch(err => console.log('Error when login in: ', err));
})

Note: Beware that passing timeouts or arbitrarily waiting for an x amount of seconds is not considered good practice. You should instead check for the response's status & assert it returns a 200 status or use route aliases.

Example:

......
.then(response => {
    if (response.status !== 200) {
      cy.log('An error happened while logging in');
    }

I could only arrive at a partial answer before I had to move on, but perhaps this can help you, or someone else, find the ultimate solution.

To remedy the error, a view property must be provided for mousedown. Providing window, like this, allowed the D3 methods to fire properly:

cy.get('svg')
  .trigger('mousedown', { which: 1, force: true, view: window }) // <-- here
  .trigger('mousemove', { position: 'left', view: window })      // <-- here
  .trigger('mouseup', { position: 'left', force: true });

However, no dragging or movement occurred during the test run, and other questions emerged from there. Starting with... Is this the right context to send along with the event? It seemed so, since window seems to be the only context that has the property chain that D3 anticipates:

view.document.documentElement

Or is that an anti-pattern... a code smell?

Running down those subsequent questions led to a few observations that seemed to have significance.

The first concerns how D3 handles mouse and drag events. D3 has numerous event listeners and callbacks that override standard events and their respective handlers.

The second, is that iframes are in play with the Cypress test runner.

Could it be that Cypress's programmatically triggered events are firing properly in the Cypress iframe, but due to D3's aggressive event handling, the translation of those events into the application iframe are getting lost? Especially considering that manually dragging a circle in the testing viewport worked fine.

Which, again, leads back to:

• Are the programmatically triggered events not being called in the correct context?
• Are those events somehow being swallowed by or colliding with D3's event handlers?

I selected the Zoomable Force Directed Graph as my D3 subject, inside of a simple Ember application, for researching this question. It perfectly reproduced the error mentioned, so it definitely seems to be a D3 + Cypress challenge, and unrelated to the front-end framework.

I hope this effort is helpful.

Continued...

After some further reading – Cypress's Trade-offs, and particularly, their open pull request Support for Native Browser Events – it seems likely that the event handling overrides within D3 are not yet fully reconcilable within Cypress. Simpler implementations, like those detailed in the drag and drop example, do not present the event handling challenges introduced by a 3rd party library like D3. However, this support does appear to be under development within the Cypress team.

My mistake for not knowing or not checking the location of my cypress.json file, moved it to the top cypress folder and value is shown properly.

this command will wait the element:

cy.get('.auth').should('be.visible');

Add this command before interacting with it.

Before clicking the Place Order button you have to add a bit of wait, because the tests are executing really fast, so by the time the items are being deleted, the click happens, hence the click is not registered by the web page. So I have added a wait of 500 milliseconds and then its working.

it("Delete cart", function () {

    cy.visit("https://www.demoblaze.com/index.html")
    cy.get("a.list-group-item:nth-child(2)").click()
    cy.get("#tbodyid > :nth-child(1)").contains('$360')
    cy.get(":nth-child(1) > .card > .card-block > .card-title > .hrefch").click({ force: true })
    cy.get(".col-sm-12 > .btn", { timeout: 30000 }).click()
    cy.go(-2)
    cy.get("a.list-group-item:nth-child(3)", { timeout: 30000 }).click().click()
    cy.get(":nth-child(1) > .card > .card-block > .card-title > .hrefch", { timeout: 30000 }).contains('Sony vaio i5').click({ force: true })
    cy.get(".col-sm-12 > .btn", { timeout: 30000 }).click()
    cy.go(-2)
    cy.get("a.list-group-item:nth-child(4)", { timeout: 30000 }).click().click()
    cy.get(":nth-child(1) > .card > .card-block > .card-title > .hrefch", { timeout: 30000 }).click({ force: true })
    cy.get(".col-sm-12 > .btn").click()
    cy.get("#cartur").click()
    cy.get("#tbodyid > :nth-child(1) > :nth-child(4) > a", { timeout: 30000 }).click({ multiple: true }, { force: true })
    cy.get("#tbodyid > :nth-child(1) > :nth-child(4) > a", { timeout: 30000 }).click({ multiple: true }, { force: true })
    //cy.get(".success > :nth-child(4) > a", {timeout: 30000}).click({multiple: true}, {force:true})
    //The above line is not working for me hence I commented it out

    //Your Answer
    cy.wait(500)
    cy.get(".col-lg-1 > .btn").click({ force: true })
    cy.get('#orderModalLabel').contains('Place order')
    cy.get('#name').click().type('Test')
    cy.get('#country').type('Test')
    cy.get('#city').type('Test')
    cy.get('#card').type('1234 1234 1234 1234')
    cy.get('#month').type('Mar')
    cy.get('#year').type('2021')
})

Execution result:

OR, A better approach if you don't want to use cy.wait() would be to intercept the POST Delete Request and wait till it is executed.

it("Delete cart", function () {
    cy.visit("https://www.demoblaze.com/index.html")
    cy.get("a.list-group-item:nth-child(2)").click()
    cy.get("#tbodyid > :nth-child(1)").contains('$360')
    cy.get(":nth-child(1) > .card > .card-block > .card-title > .hrefch").click({ force: true })
    cy.get(".col-sm-12 > .btn", { timeout: 30000 }).click()
    cy.go(-2)
    cy.get("a.list-group-item:nth-child(3)", { timeout: 30000 }).click().click()
    cy.get(":nth-child(1) > .card > .card-block > .card-title > .hrefch", { timeout: 30000 }).contains('Sony vaio i5').click({ force: true })
    cy.get(".col-sm-12 > .btn", { timeout: 30000 }).click()
    cy.go(-2)
    cy.get("a.list-group-item:nth-child(4)", { timeout: 30000 }).click().click()
    cy.get(":nth-child(1) > .card > .card-block > .card-title > .hrefch", { timeout: 30000 }).click({ force: true })
    cy.get(".col-sm-12 > .btn").click()
    cy.get("#cartur").click()

    //Intercept the Delete Request
    cy.intercept('POST', '/deleteitem').as('deleteitem')

    //Delete Item
    cy.get("#tbodyid > :nth-child(1) > :nth-child(4) > a", { timeout: 30000 }).click({ multiple: true }, { force: true })
    
    //Wait till the POST request is executed
    cy.wait('@deleteitem')
    
    //cy.get(".success > :nth-child(4) > a", {timeout: 30000}).click({multiple: true}, {force:true})
    //The above line is not working for me hence I commented it out

    //Your Answer
    cy.get(".col-lg-1 > .btn").click({ force: true })
    cy.get('#orderModalLabel').contains('Place order')
    cy.get('#name').click().type('Test')
    cy.get('#country').type('Test')
    cy.get('#city').type('Test')
    cy.get('#card').type('1234 1234 1234 1234')
    cy.get('#month').type('Mar')
    cy.get('#year').type('2021')
})

Execution result:

You just have some problems with capital letters in the variable names.

Instead of this

const Homepage = new HomePage();    // Homepage is the instance
HomePage.getNameBox()               // uses the class not the instance

the convention is to use a small char at the start of the instance

const homePage = new HomePage();
homePage.getNameBox()               // uses the instance

It looks like you are missing the npx prefix, try again with this:

npx cypress run --record --key <key goes here>

I'm using Cypress with Typescript and Cucumber preprocessors and all steps in the feature file running synchronously, check the versions and example here: Test Repo Cypress-Cucumber-Typescript