Cypress: How to handle browser-based authentication pop up dialog in Cypress

Five years ago I have written a blog on how to handle browser-based authentication for selenium webdriver.

 

Now it is for cypress.

Cypress has come with a very easy solution.

A very simple syntax to handle the browser-based authentication,

If we have a username and password and the URL then the cypress command will be 

cy.visit(app_URL, {auth:{username:appUserName, password: appPassword}})

For example, we have

username : abc

password : abc123

URL : xyz.com

Then cypress command will be

cy.visit('https://www.xyz.com', {

auth: {

        username: abc,

        password: abc123

      }

})

 

There is an alternative way that cypress suggested,

cy.visit(http://username:password@domainName.com)

Note that we have a special character colon “:” between username and password.

For the above example,

Cypress command will be,

cy.visit('https://abc:abc123@www.xyz.com')

That’s all for now. We will discuss more on cypress in my future post.

Thank you. 

Happy automation testing with Cypress!

Cypress: How to test a web application using Cypress

In the previous posts, we have discussed various features of cypress and the installation procedure. 

Here we will see how a sample test can be written and execute the test using a  cypress test runner.

Test case: Search with the text cypress on Google.

Steps:

1. Go to Google.com

2. Type the text ‘cypress’

3. Click on the Search button

4. Verify the text “JavaScript End to End Testing Framework | cypress.io”

Now start automating the script.

Create a project structure: 

1. Open the folder using the visual studio code that I have created in my last post in order

to install the cypress application. Note that I am using visual studio code as the editor for scripting.

You can use any editor that you feel comfortable with.

2. Go to Terminal->New Terminal to open a new terminal.

3. Type the following command to create a new project structure.

npx cypress open

4. It will create a cypress project structure. 

5. Click the OK button and the project structure has been created 

6. Cypress Test runner window is now opened and click the close button to close the window.

7. The project structure looks like the following.

    

    

8. Now expand the cypress folder and see the structure.

    

9. There are four folders.

1. fixtures: All the test data files are there,

2. Integration: All the test scripts are there.

3. Plugins: cypress plugins are there.

4. Support: all the customized commands are there.

    I will discuss the project structure in a separate post.

Writing Test:

Now come to write the cypress test. 

1. Expand the Integration folder and note that a folder named “examples” are displayed.

   
   

2. Now delete that folder as it has some sample scripts and it is not needed now.

3. create a new test file name cypress_test.spec.js

    

4. Write the following script 

Note that we use describe..it blocks. As cypress is using mocha by default, it uses this block.

cy.visit() : to visit a page 

cy.get(): for getting element location or searching an element

cy.get().click() : to click an element

cy.contains(): to check the text available on the page.

We will discuss more details on cypress API in later posts.

5. Save the file.

Run the test using TestRunner:

1. Open a terminal window

2. Type the following command in the terminal.

npx cypress open

3. It will open the Cypress test runner.

    

Now click on the cypress_test.spec.js file and it will start running.

 

Run the test in the terminal:

1. If you want to run the cypress test in terminal, then just open the terminal and type the following

command:

npx cypress run

2. The test will start running in headless mode and display the result.

That’s all for now. We will discuss more on cypress in my future post.

Thank you. 

Happy automation testing with Cypress!