Friday, January 1, 2016

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

image

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

npm install --global gulp
image
Step 3 : Install gulp in our project locally (project devDependencies) by running following command.
npm install --save-dev gulp

image

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

image

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

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

image

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

image

  • New File “gulpfile.js” is created.

image

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

image

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
image
  • The default task will run and do nothing.

image

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

image

  • Now gulp-protractor plugin is installed.

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

image

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

image

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.

image

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

[image71.png]

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

image

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.

image

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

Happy UI Testing with Protractor!!!

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...