Protractor Structure and Coding Camp For Beginners

We are done with the local installation process, now we can proceed on understanding the project structure and start coding. If you have missed the installation process you can find it here.

For now let’s move on and let’s get this started.

Project Structure

First, we talk about how we can have a structure to run the protractor test scripts. You only need 2 files. The configuration file (conf.js) and the the test spec file (goole-search.spec.js). Create the structure according to below screenshot.

With the only two file you will be able to run an automation test scripts.

Configuration File

Configuration file compose of the things you want your test script to do. What port it will be running, what suite it will be using, what browser it will run or settings of the reports.

Take a look for the example below and their respective description. Add this to your conf.js file.

exports.config = {
    // Local address and port that the selenium server on start up
    seleniumAddress: 'http://localhost:4444/wd/hub',
    // Test suite declaration
    suites : {
      // Test specs that it will be running
      googleSearch: [
        // You can declare multiple spec files in here
        'specs/google-search.spec.js'
      ]
    },
    // Protractor uses jasmine for logs and report settings
    framework: "jasmine",
    jasmineNodeOpts: {
      // Terminal logs and default timeout interval. As your test will become
      // longer you will need increase the default timeout interval
      showColors: true,
      includeStackTrace: true,
      defaultTimeoutInterval: 1440000
    },
    // It needs to be direct connect when it the selenium is starting up
    directConnect: true,
    // What browser it will need to run
    capabilities: {
      browserName: 'chrome'
    },
    // After the test will run, it will start to prepare the reports
    // according to the setup
    onPrepare: function() {
      // Jasmine reports setup
      // It will take a screenshot once the test will fail
      let HtmlReporter = require('protractor-beautiful-reporter');
      jasmine.getEnv().addReporter(new HtmlReporter({
         baseDirectory: 'reports',
         screenshotsSubfolder: 'screenshotsOnFailure',
         takeScreenShotsOnlyForFailedSpecs: true,
         jsonsSubfolder: 'jsonFiles',
         excludeSkippedSpecs: true,
         preserveDirectory: false,
         clientDefaults:{
         showTotalDurationIn: "header",
         totalDurationFormat: "h:m:s",
         gatherBrowserLogs: true
       },
      }).getJasmine2Reporter());
    },
  };

Spec File

The test spec is the test scenario that you want to automate. If you are familiar with Cypress and Katalon, they have the same type of scripting using Javascript.

Let’s start with the basic coding structure

// Test suite 
describe('This will display in the report as parent', function() {
    // You can add multiple test here by declaring "it"
    it('This will describe the test inside the parent', function() {
       // You add your code 
       browser.get('https://google.com');
    });
  });

Save this sciprt on the spec file, let’s try running by typing in the terminal protractor conf.js.

Are we ready with the result?

This is the first step in creating the automation of the redundant test cases that you have. If you are having trouble or error when running the script due to selenium server not started, you might need to add another bash terminal and run the webdriver manager there.

Start your terminal and type in webdriver-manager start. This will start the selenium server where it will launch the chromedriver.

Add Code Using Ruto X-Path

We already know the how to launch the browser on a certain website, now we want to add a test case or a test scenario to our test suite. Imagine the scenario below and this test case is redundant. So we want to add it on the regression test script instead of verifying it manually everytime.

Scenario: As user I should be able to search something on google so that I could I see the match result of my search.

What’s should be the next step we should do?

We need to find the elements or tags of the hmtl in order to automate things. And this where ruto xpath finder will be coming in.

Going back, we already was able to launch the google search page, what we need right now is to find the element of the search bar of google. In ruto browser plugin, we will be doing the same as below.

Now we know how to get the xpath with ruto we should start running a sample script with assertion.

describe('Search Google Functionality', function() {

    it('As user, I should be able to search something on google, so that I could I   see the match result of my search.', function() {

      // For non angular website, you need to declare this in order to run.
      browser.waitForAngularEnabled(false);
      // Launch the google page using chrome you set on conf.js
      browser.get('https://google.com');
      
      // Find the search input textbox of google and input protractor blogs
      element(by.xpath("//input[@class='gLFyf gsfi']")).sendKeys("protractor blogs");

      // Add an enter keyboard action
      browser.actions().sendKeys(protractor.Key.ENTER).perform();

      // Declare of the variable of the assert element
      var firstResult = element(by.xpath("//span[text()='15 Best Practices for Building Efficient Protractor Frameworks ...']"));

      // Assert if the element is present
      assert.ok(firstResult);

    });
    
  });

We can run this again through terminal and you should be able to see the result below.

There should be a report folder showing on every test run whether it a new or updated one.

Example of report in protractor compose with the ff:

• Test Suite (“describe” in test specs)
• Test Cases (“it” in the test specs)
• Brower
• Time Duration
• Pass/Fail Visibility
• Log
• Screenshot

That’s it for this blog and the next should be on how we can push it to github and deploy it continuously.