2

I am using this example but I am not able to automate the "New Tab" button.

Here is a screenshot of the HTML document: Screenshot of the HTML

I am trying to solve this by using the first answer from this topic.

/// <reference types="cypress" />
describe('Example shows how to work with browser windows.', () => {
  it('Example shows how to work within button that opens new tab without "target: _blank" and "href" attributes.', () => {
        cy.visit('https://demoqa.com/browser-windows')
        cy.window().then(win => {
            cy.stub(win, 'open').as('open')
          })

          cy.xpath('//*[@id="tabButton"]').click()
          cy.get('@open').should('have.been.calledOnceWithExactly', '/sample')
    })
})

I am not sure what I miss.

D.Nykl
  • 147
  • 8
Ivan Markov
  • 129
  • 4
  • 15
  • At July 2023 this works ok. `cy.xpath()` has been removed from Cypress so you must use `cy.get()` instead, but the test passes. – Sudac Jul 21 '23 at 20:49

4 Answers4

0

Your example is not following the link's code you have provided. I have refactored your code, tested & it's working:

/// <reference types="cypress" />
describe('Example shows how to work with browser windows.', () => {
  it('Example shows how to work witn button that opens new tab without "target: _blank" and "href" attributes.', () => {
      cy.visit('https://demoqa.com/browser-windows', {
        onBeforeLoad(win) {
          cy.stub(win, 'open')
        }
      });
    
      cy.get('#tabButton').click();
      cy.window().its('open').should('be.called');

      cy.get('#windowButton').click();
      cy.window().its('open').should('be.called');

      cy.get('#msgWindowButtonWrapper').click();
      cy.window().its('open').should('be.called');
  });
});

Results:

enter image description here

Manuel Abascal
  • 5,616
  • 5
  • 35
  • 68
  • The code is working. Thanks. But I still can't get it. The page from the new tab doesn't open. – Ivan Markov Nov 12 '21 at 13:40
  • No, it won't open. Accessing new windows via Cypress is intentionally not supported. You can read more about it here: https://docs.cypress.io/guides/references/trade-offs#Multiple-tabs – Manuel Abascal Nov 12 '21 at 13:58
  • Yes, I know that. But I was thinking that (somehow) we can open the new link in the same browser tab. – Ivan Markov Nov 12 '21 at 15:27
  • Well, you could visit the page after last assertion by adding `cy.visit()` method like so: `cy.visit('https://demoqa.com/sample');` aside from that, it's not supported. – Manuel Abascal Nov 12 '21 at 15:39
  • Aha... so I need to know the URL before pressing the button. I can't inspect it or copy it. Ok... thanks for helping :). – Ivan Markov Nov 12 '21 at 15:44
  • Yeah, you can grab the `URL` using jQuery method to get the `attr` of the click element. – Manuel Abascal Nov 12 '21 at 15:47
  • Ok, but in that case, we don't have "href" attribute. The hyperlink is not visible anywhere in the HTML document at all. In Selenium the solution is easy, we can switch to different tabs. It looks that in Cypress there isn't any working solution for this case. We are not able to grab the hyperlink from the newly opened tab. I guess there isn't a way to solve that by automation solution with Cypress. – Ivan Markov Nov 12 '21 at 16:21
  • Yeah, if you don't have `URL` it won't work visiting the new tab unless is hardcoded. As mentioned in the docs, it's not supported in Cypress. – Manuel Abascal Nov 12 '21 at 16:44
  • 1
    Oh well... I tried to add attribute "target=_self" but with no sucksess - the attribute was added, but the link was opened again at the new tab. Ok the topic can be closed now. – Ivan Markov Nov 12 '21 at 16:57
  • @ManuelAbascal and IvanMarkov : I too same issue where the does not have href and target attribute to switch to new tab and continue the execution on new tab. Any solution or work around found you guys. – sam Mar 29 '22 at 03:06
0

For all who search a way to handle new tab or new window with cypress you need this post Testing PayPal checkout flow with Cypress

The most important part of code from that post is:

// Used to keep the reference to the popup window
  const state = {}

  /**
   * Intercepts calls to window.open() to keep a reference to the new window
   */
  Cypress.Commands.add('capturePopup', () => {
    cy.window().then((win) => {
      const open = win.open
      cy
        .stub(win, 'open')
        .callsFake((...params) => {
          // Capture the reference to the popup
          state.popup = open(...params)
          return state.popup
        })
    })
  })

  /**
   * Returns a wrapped body of a captured popup
   */
  Cypress.Commands.add('popup', () => {
    const popup = Cypress.$(state.popup.document)
    return cy.wrap(popup.contents().find('body'))
  })
Valerii Pogrebniak
  • 1
0
describe('Example shows how to work with browser windows.', () => {
    it('Example shows how to work witn button that opens new tab without "target: _blank" and "href" attributes.', () => {
        cy.visit('https://demoqa.com/browser-windows', {
          onBeforeLoad(win) {
            cy.stub(win, 'open')
          }
        });
      
        cy.get('#tabButton').click();
        cy.window().then(() => {
        cy.visit('https://demoqa.com/sample', { failOnStatusCode: false })
        })
        cy.get('#sampleHeading').should('have.text','This is a sample page')
        cy.go(-1)
        cy.get('#windowButton').click();
        cy.window().then(() => {
        cy.visit('https://demoqa.com/sample', { failOnStatusCode: false })
        })
        cy.go(-1)
  
        cy.get('#msgWindowButtonWrapper').click();
        cy.window().then(() => {
        cy.visit('https://demoqa.com/sample', { failOnStatusCode: false })
        })
    });
  });

If the element doesn't have an <a> tag, target and href attributes it will work this way.

R.Winkles
  • 175
  • 6
Shubham Kulkarni
  • 1
  • 1
0
cy.window().then((win) => {
  cy.stub(win, 'open').as("NewTabs")
})

cy.contains('button', 'buttonName').click()

cy.get("@NewTabs").should("be.called")
})
A.L
  • 10,259
  • 10
  • 67
  • 98
Sanjeev Yadav
  • 1