Is it possible to configure Cypress to always open in the current tab instead of opening in a new tab?

One challenge with Cypress is testing on multiple tabs. Our website default to opening in a new tab. Is there a way to make Cypress continue the tests on the same tab?

cy.get(element).invoke('attr', 'target', '_self').click()

I vaguely recall reading somewhere that it's possible, but my tired 1am brain can't seem to find the information via Google search. I also stumbled upon this section in the Cypress documentation, but it might not be applicable to my scenario since I need to perform multiple assertions on the new page which requires logging in via SSO: https://docs.cypress.io/api/commands/invoke.html#Function-with-Arguments

javascriptautomated-testscypress

Answer №1

Here's the solution that worked for me:

cy.find(element).executeAction('removeAttribute', 'target').performClick()

Answer №2

One approach could be to extract the value of the href attribute from the specified element and then use cy.visit() to navigate to that link in the same tab using Cypress:

cy.get(element).invoke('attr', 'href').then(link => {
    cy.visit(link);
})

Answer №3

Another option is to utilize

describe('testing', () => {
  let link: string

  it('Retrieve response body', () => {
    cy.intercept('https://example.com/data').as('dataRequest')
    cy.get(element).click().wait('@dataRequest')
      .then(response => {
        link = response.response.body.link
      })
  })

  it('Navigate to link', () => {
    cy.visit(link)
  })
})

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to implement a placeholder height for images on a webpage with varying heights using HTML

I'm facing an issue with an image on my website that has a dynamic width and height as defined by the following CSS: .sm_item_image { width:100%; height:auto; max-width:400px; } The problem arises when the image takes some time to load, ...

javascripthtmlcss

Iterate through and conduct conditional verification

In my project using AngularJS and HTML, I have created a table to display records. I am looking for a way to iterate through the column values and strike through any value in the column that meets a certain condition. For example, in the demo provided her ...

javascripthtmlangularjs

Utilizing MongoDB query for geoLocation with maxDistance parameter

Customer location: customerCoordinates: [83,24] stores: { id:1, location: {coordinates:[85,44]...} maxRadiusDelivery: 2000 //meters }, { id:2, location: {coordinates:[82,34]...} maxRadiusDelivery: 100 //meters } Query: db.wh.find({ 'locati ...

javascriptnode.jsangularmongodbtypescript

Simulating an API request using Vue and Jest/Vue test utils

Utilizing Vue for the frontend and Python/Django for the backend, I aim to create tests that verify the functionality of my API calls. However, I am encountering difficulties when attempting to mock out the Axios calls. I suspect there might be an issue w ...

javascriptvue.jsjestjsaxios

Dropdown menu will appear when you click on one of the menu items

Can someone help me create a dropdown menu using a JavaScript function that toggles on click? I've attempted to do so with the following code, but it's not working as expected. Could you please point out where I might be going wrong? I'm loo ...

javascripthtmlcssflexbox

What causes the malfunction of the save function in express?

Today marks my first venture into using Express. I attempted to create a straightforward route, but unfortunately, my save function is not cooperating. Despite scouring similar inquiries on stackoverflow, I have been unable to find a solution. Any assistan ...

javascriptnode.jsapiexpressroutes

Learn how to display each element in a list one by one with a three-second interval and animated transitions in React

Let's consider a scenario where we have a component called List: import React, { Component } from 'react'; class List extends Component { constructor() { super(); this.state = { list: [1, 2, 3, 5] } ...

javascriptarraysreactjsalgorithmevents

modify the tr element within a jQuery context

I am attempting to convert a "yes" to a select dropdown that allows users to choose between yes and no. The HTML structure is as follows: <tr> <td>text</td> <td>no (needs to be changed via JS)</td> <td><a href="#"&g ...

javascriptjqueryhtmljquery-selectors

Accessing table cell value when clicked using JavaScript or jQuery

I am currently working on an ASP.NET MVC application where I have a table displaying records from the database in razor code. My goal is to extract the record ID "FeeZoneID" from a cell value when the delete link in the last column is clicked, and then t ...

javascriptjqueryasp.net-mvcrazor

Personalizing the label of a select input using materialui

Working on customizing a select element using the "styled" method: const StyledSelect = styled(Select)` height: 2rem; color: #fff; border-color: #fff; & .${selectClasses.icon} { color: #fff; } & .${outlinedInputClasses.notchedOutl ...

javascriptreactjsmaterial-ui

Exploring JSON information containing colons in the labels

I am having trouble accessing JSON data in Angular that contains a colon in the label (refer to responsedata). This is the code causing issues: <li ng-repeat="i in items.autnresponse.responsedata | searchFor:searchString"> <p>{{i.autn:numhits} ...

javascriptjsonangularjs

Using Parseint in a Vue.js method

For instance, let's say this.last is 5 and this.current is 60. I want the sum of this.last + this.current to be 65, not 605. I attempted using parseInt(this.last + this.current) but it did not work as expected. <button class="plus" @click="plus"&g ...

javascriptvue.jsvuejs2

Is there a method to run code in the parent class right after the child constructor is called in two ES6 Parent-Child classes?

For instance: class Parent { constructor() {} } class Child { constructor() { super(); someChildCode(); } } I need to run some additional code after the execution of someChildCode(). Although I could insert it directly there, the requirement is not to ...

javascripttypescriptecmascript-6

Each div will display the same image twice when loading the image

I have a grid where images are dynamically loaded with a link to a lightbox. Currently, this is how I am achieving it: $(".selection_thumb").each( function(i) { $(this).append("<a data-lightbox='image-1' href='img/folder/folder/"+(++ ...

javascriptjqueryhtmlcssforeach

Having trouble retrieving an object through a GET request in Node.js with Express

Currently, I am going through a tutorial on Node.js by Traversy Media and I have encountered an issue that has me stumped. The problem arises when I attempt to retrieve the response of a single object from an array of objects using the following code: app ...

javascriptnode.jsjsonexpress

Remove data from a database using Ajax in ASP.NET MVC without utilizing DataTables

I'm encountering a slight issue with my code. I am attempting to delete a row from the database without using DataTables in ASP.NET MVC, but it seems to be not working as expected. I have displayed all items from the database on a page within div elem ...

javascriptc#jquery.netajax

Is there a way to update the styling of specific sections of an input field as the user enters text in React?

Just like in most markdown editors, I am looking to enable the ability to modify parts of an input field as the user enters text. For instance: When the user types "_above_", as soon as the second underscore is typed, the text should be styled accordingly ...

javascripthtmlcssreactjs

Attempting to eliminate the mouseleave event by utilizing the jQuery off function

I have a set of buttons in an array and I want to remove the event listeners for each button once it has been clicked. Here is my current approach: JavaScript: var currentButton; var selectedButtons = $("#moto-menu a"); function onEnter(){ TweenMax. ...

javascriptjqueryhtml

Vue.JS enables the seamless addition of rows to a form on the fly

I am currently working on creating a dynamic form using Vue. The concept is that when the user clicks the add button, another row will appear for them to input data. However, I encountered an issue where initially only 1 row was set up, but when I added th ...

javascriptformsvue.js

Vue: Order Conflict. A new module has been incorporated into the system

Whenever I try to run my program, something unexpected happens; How can I resolve this issue? I don't want to overlook it; I searched online and found suggestions to change the component order, but after checking my code, it didn't work; Any i ...

javascriptvue.jswebpack