Cypress invoke command

Profile picture for user arilio666

Today we are going to be reviewing the invoke function okay we're going to be learning some use cases that where we can apply the usage of this particular invoke-command in cypress.

  • This command is used to invoke functions yielded from the previous subject.
  • You probably know cypress has a kind of limitation because cypress runs in the browser right and it will never have multiple tab support so with invoking we are going to be capable to see a workaround.
  • This simply means we cant change the focus to multiple tabs which are opening in cypress.
  • Instead, we will try to make that tab open on the same page to continue our test.
  • This is done with the help of the JQuery attribute which can be invoked using this command.

Syntax

.invoke(functionName)
.invoke(options, functionName)
.invoke(functionName, args...)
.invoke(options, functionName, args...)
  • functionName: name of the function to be invoked
  • options: log and timeout
  • args....: Additional arguments for function call. There is no limit to the no. of arguments.

Example: Handle new tab

For example purpose, we will be using the https://www.programsbuzz.com/ site to automate.

Here is what we are going to do today:

Step 1: We will navigate to the page
Step 2: We will scroll down to the bottom of the page to the new tab opening the link.
Step 3: We will log the location after clicking before invoking.
Step 4: We will use invoke and remove attribute target to make the link open in the present tab itself.

Sounds Fun Right? Let us dive in!!

Before going into the test we wanna understand a bit about the developer's side knowledge.

  • This tag along with the attributes and values is the place where a new tab opens when clicked.
  • The target attribute which has the _blank value is the reason the new tab is invoked.
  • Now in JQuery method documentation, there are many queries we can use to test.
  • When we remove this target attribute out of this place we can open the page in the same respective place instead of the new tab.
  • This is very useful in terms of testing in cypress as it does not have the feature to change focus on different tabs.

For the first time, it will throw a cross-origin error while using this method use this in cypress.json to fix it.

{
    "chromeWebSecurity" : false
}

Now let us get on with our code:

Without Invoke

describe('Using Invoke Opening Tab Redirect Page In The Same Page Using ProgramsBuzz Site',()=> {
    it('visit the site ',()=>{
        cy.visit('/')

    })
    it('ScrollDown To The Link Location',()=>{
        cy.get('#block-gavias-meipaly-copyright').scrollIntoView()
        
    })
    it('Click The New Tab Redirect Link And Using Invoke Remove Attribute Target To Open The Link In Same Page',()=>{
        cy.get('a').contains('By iVagus Services Pvt. Ltd.').click()
        cy.location().then(yObj => cy.log(yObj.href))
    })

})

  • So we have written the first test to get the location of the new tab and check whether the focus is changing to that new tab which is www.ivagus.com from www.programsbuzz.com 
  • Here as you can see from the pic the focus has not changed to the new tab as cypress lacks in this.
  • We can see the new tab has opened and the location log is still in the focus of the first test page which is www.programsbuzz.com

With Invoke

describe('Using Invoke Opening Tab Redirect Page In The Same Page Using ProgramsBuzz Site',()=> {
    it('visit the site ',()=>{
        cy.visit('/')

    })
    it('ScrollDown To The Link Location',()=>{
        cy.get('#block-gavias-meipaly-copyright').scrollIntoView()
        
    })
    it('Click The New Tab Redirect Link And Using Invoke Remove Attribute Target To Open The Link In Same Page',()=>{
        cy.get('a').contains('By iVagus Services Pvt. Ltd.').invoke('removeAttr', 'target')
        cy.get('a').contains('By iVagus Services Pvt. Ltd.').click()
        cy.location().then(yObj => cy.log(yObj.href))
    })

})

  • Now here we have used the invoke-command and used the JQuery function remove attribute to remove target to focus on the new site on the same page.
  • We can utilize various jquery commands from API documentation under the general attributes category.
  • In this case, we have used removeAttr which is used to remove an attribute in this case its target.
  • So we can see from the location log and see that we are now in the focus of www.ivagus.com and didn't open a new tab instead it has been opened on the current page which will be convenient for us to test.

This is one way you can effectively use invoke-command in cypress.