Javascript - .invoke('removeAttr', 'target').click(); still opens a new window

Venus
August 31, 2023
135 views
1 vote
2 Answers

I am using Cypress to check the functionality of two buttons; one is for the App Store and the other is for Google Play. The HTML appears to be similar for both, in particular, the target attribute being _blank:

<ul class="AppDownloadLinks_List__tY_ff" xpath="1">
  <li class="AppDownloadLinks_ListItem__UuCiZ">
    <a href="https://apps.apple.com/us/app" target="_blank" aria-label="App Store Link (Opens in a new tab)" rel="noreferrer">
      <span class="is-vishidden">App Store Link</span>
      <img class="AppDownloadLinks_Image__AVsMa" alt="App Store" src="/images/app-store.svg">
    </a>
  </li>
  
  <li class="AppDownloadLinks_ListItem__UuCiZ">
    <a href="https://play.google.com/store/apps/" target="_blank" aria-label="Google Play Store Link (Opens in a new tab)" rel="noreferrer">
    <span class="is-vishidden">Google Play Store Link</span>
    <img class="AppDownloadLinks_Image__AVsMa" alt="Google Play Store" src="/images/google-play.png">
    </a>
  </li>
</ul>

I was able to successfully open the button for the App store in the same window using this function:

  /**
   * @method
   * @desc Checks functionality of App Store button
   * @returns {void}
   */
  clickAppStoreBtn(): void {
    this.clickMenuButton();
    cy.get(downloadLinks).should('be.visible');

    // removes target attribute of button before clicking to open on same browser window:
    cy.get(appStoreButton).should('be.visible').invoke('removeAttr', 'target').click();
    cy.url().should('eq', 'https://apps.apple.com/us/app');

    // validates text on js confirm alert box that displays for app store:
    cy.on('window:confirm', (alertText) => {
      expect(alertText).to.contains('https://apps.apple.com wants to open this application.');
    });

    // closes the confirm alert box by clicking cancel button:
    cy.on('window:confirm', () => false);
    cy.go('back');
  }

However, my Google Play button will still open a new window and I have not been able to figure out the problem.

This is the most basic thing I’ve tried:

  /**
   * @method
   * @desc Checks functionality of Google Play button
   * @returns {void}
   */
  clickGooglePlayBtn(): void {
    this.clickMenuButton();
    cy.get(downloadLinks).should('be.visible');

    // removes target attribute of button before clicking to open on same browser window:
    cy.get(googlePlayButton).should('be.visible').invoke('removeAttr', 'target').click();
    cy.url().should('eq', 'https://play.google.com/store/apps');
    cy.go('back');
  }

I have also tried target=’_self’ and custom functions to get around the default behavior and the browser still opens a new tab.

Answers

Chosen as BEST ANSWER
- Venus
- August 31, 2023 at 3:23 pm
- 0 votes
0
I solved the problem by doing three things: First, I asked my team and my colleague recommended this tutorial on using target="_self" Check The Impressum Link That Opens In A New Tab

What I learned that was different from what I did is asserting the attribute is already blank and then invoking target=self this way:
cy.get(googlePlayButton).should('have.attr', 'target', '_blank').invoke('attr', 'target', '_self').click();
However, when I ran my Cypress test and it failed because it could not find the target = "_blank" attribute, then I looked at what I was targeting in my HTML. I was actually not targeting the anchor element! At first I had:
:nth-child(2) > a > .AppDownloadLinks_Image__AVsMa
I looked at the value of my page object for the App Store button and saw a big difference. It targeted the tag, which is where the target="blank" is attached. WOW! So I changed the value of my page object ensuring my page object indeed targeted the element and then my test passed.I was able to successfully open the Google Play button in the same browser tab and proceed with the rest of my test!
i.AppDownloadLinks_ListItem__UuCiZ:nth-child(2) > a:nth-child(1)