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!

Protractor : How to maximize browser window using protractor

In our post on How to automate AngularJS application using protractor we see that browser window is not maximized.

Sometimes we need to maximize our browser window at the time of automation. Protractor has given us a nice command to execute such instruction.

In protractor we write script in our conf.js file using onPrepare  function. 

The script will be,

browser.manage().window().maximize();

In our example we use our project that we develop for one of our previous post.

Step 1 : Open the project and open conf.js file and write the above code in onPrepare function like the following.

Note that onPrepare is a function that fires at the time of executing script. So when browser window opens and it first maximize its browser window and then start navigate to the url.

Step 2 : Now conf.js file look like the following.

Step 3 : Run selenium server and then run the script using the following command.

Note that when browser window opens it first shows a relatively smaller window and then it become maximize to show full screen.

That’s all for now. More new things are coming.

Wish you a happy e2e testing!!!

Protractor : How to run protractor script in different browsers

In our last post we have seen on how we can start our selenium standalone server using gulp. In order to perform cross browser testing it is needed to run our protractor script in different browser. Here we will see how we can do that by running our protractor script in different browser.

Protractor support four major browsers (Chrome, Firefox, IE and Safari).

If we use conf.js file to run our protractor script then we need to add Selenium capabilities object to our conf.js file.

Here capabilities is a json object to add browser name. Note that we have to change the browser name here to run our protractor script to our desired browser. If we use ‘chrome’ in place of ‘firefox’ then it starts running our script in chrome browser. Same for ‘safari’  and ‘internet explorer’. We can use two other keys with ‘version’ and ‘platform’.

Example : We use our previous project that we have developed in our previous post. Here we modify the conf.js file

Step 1 : Open the project and open conf.js file.

Step 2 : Add the following code for firefox browser. Note that chrome browser is by default for protractor. So we don’t need to mention it. If we implement firefox browser, we can add the following code in our conf.js file.

Now conf.js file looks like the following,

Step 3 : Now run the script by using the following command,

Note that we have to run Selenium standalone server before that.

When it starts running, opens the firefox browser and execute the steps.

If we want to run our scripts in multiple browsers at a time then we use multicapabilities object. For this we add the following code.

Now the conf.js file will be,

Now run the script. We see two browser window opens and execute the script. Note that we must have chrome and firefox installed on our machine.

In case of internet explorer, things are different.

Step 1 : Open the terminal and type the following to install IE driver

Step 2 : Add multicapabilities object to conf.js file like the following where browser name is ‘internet explorer’.

Step 3 : Run selenium standalone server.

Step 4 : Now run the script by using the following command,

We see IE browser window opens and execute the script.

In our next posts we will show how we can manage it other ways.

Happy UI Testing with Protractor!!!

Protractor : How to run multiple protractor script Files using Gulp

In our last post we have discussed on running protractor script using gulp. In this post we will show how we can run multiple JavaScript files that contains protractor script.

For this purpose we will use our previous project that we have developed to implement gulp on protractor script.

Step 1 : Open the project using webstorm editor and add a new folder by right clicking on Project name and going to File>New>Directory

Step 2 : Enter the folder name as “test” and click Ok button.

Step 3 : Now move the test.js file to “test” folder by dragging the file and drop it to test folder. Move window is displayed and click OK button. Now test.js file is moved to test folder.

Step 4 : Rename the test.js file as testadd.js by right clicking on file name and going to Refactor>Rename.

Enter the file name “testadd.js” and click Refactor button.

Step 5 : Add another js file in the test folder by right clicking on folder and going to File>New>JavaScript File.

Step 6 : Enter file name as “testsub.js” and click on Ok button.

Step 7 : Open testsub.js file for subtraction and write the following code,

Note that above scripts subtract two numbers.

Step 8 : Now there are two files to run in the test folder. We can handle it by modifying gulpfile.js.

Step 9 : Open gulpfile.js and modify gulp.src() method by writing the following code,

Note that above expression means include all files as source files in the “test” folder that has .js extension. So it will execute all the .js extension files in the “test” folder.

Step 10 : Now gulpfile.js looks like the following,

 

Step 11 : Now go to terminal and start selenium server using the command,

Run the following command to run our protractor script.

gulp

Note that scripts run and at first it execute testadd.js file and then execute testsub.js files. It opened chrome browser and execute addition first and then subtraction. We get the following result.

That’s all from here. We will discuss more on gulp and protractor in future.

Happy UI Testing with Protractor!!!

Protractor : How to run Protractor script using gulp runner

In our last post we have seen how we can automate AngularJS application using protractor. Here we will show how we can run our protractor script using gulp. Gulp is a tool that helps to run our JavaScript files. We can write our protractor script in separate JS files and instruct gulp to run all the js files one by one.

Here we will use our previous protractor test project and run our protector test using Gulp.

Step 1 : Open the test project that was developed our previous post. 

Step 2 : Open a new terminal and run the following command to install gulp globally.

npm install --global gulp

Step 3 : Install gulp in our project locally (project devDependencies) by running following command.

npm install --save-dev gulp

Note that a new folder node_module is created and all the gulp files are there.

Step 4 : Create a gulpfile.js at the root of our project.

• Right click on the project and go to File>New>JavaScript File.

• Enter file name as “gulpfile.js” and click on OK button.

• New File “gulpfile.js” is created.

• Open “gulpfile.js” file and write the following code.

Note that using gulp.task() API we can run any JavaScritpt file.

• Now our project is ready to use gulp. To verify it just open a new terminal and write the following command.

gulp

• The default task will run and do nothing.

Note that if we use different task name instead of “default” we need to change the task name. 

Step 5 : In order to run our protractor script we need to install  gulp-protractor plugin. 

• Open a terminal and run the following command as a development dependency.

npm install --save-dev gulp-protractor

• Now gulp-protractor plugin is installed.

Step 6 : Open “gulpfile.js” again and add the following variable.

Now add the following code at gulp.task() function.

Here gulp.src() takes the script file name as argument. In our case test.js is the file name. We can run multiple js files. We will show you in our future post.

In the configFile we assign our conf.js file.

In the args we assign base URL and address.

Now “gulpfile.js” looks like the following.

Step 7 : Now go to terminal and start selenium server using the command,

Note that it can be handled using gulp and I will show you in next post.

Run the following command to run our protractor script.

gulp

Note that we use only the command name “gulp” in case of task name “default” as it can automatically detects the task by default. If we mention task name at gulp.task() function then we need to mention it after gulp command.

Step 8 : Scripts will start and execute the test.

That’s all from here. We will discuss more on gulp and protractor in future.

Happy UI Testing with Protractor!!!

Node.js : How to install node.js installer in windows machine

Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. It is lightweight and efficient.

• Go to Node.js download page https://nodejs.org/en/download/
• Click on the installer for windows.

• Double click on the installer file. In my case it is “node-v5.0.0-x86.msi”. A pop up window is displayed.
• Click on Run button.

• Node.js setup window is displayed. Click on Next button.

• Check on the checkbox named “I accept the terms in the License agreement”. Click on Next button.

• Keep the destination path same in this window and click on Next button.

• Click on Next button.

• Click on Install button.

• A pop up window is displayed and click on Yes button.

• Installation starts.

• Click on Finish button.

• Node.js installation is now complete.
• In order to verify that node.js is installed properly, open command prompt window by writing “cmd” text in the run text box and press Enter key from Keyboard.

• Command prompt window is displayed and type the following command.

node –version

 

• Inspect that node.js version 5.0.0 is displayed.

• It is proved that node.js is installed properly.