What is the best way to configure shared functions that can be used across all of my test suites when working with Protractor and Selenium?

Question

What is the best way to configure shared functions that can be used across all of my test suites when working with Protractor and Selenium?

Currently, I am actively developing an AngularJS protractor test suite. The configuration file for this project is structured in the following way:

exports.config = {

    seleniumAddress: 'http://localhost:4444/wd/hub',
    baseUrl: 'http://127.0.0.1:17315/',
    capabilities: {
        browserName: 'chrome',
        'chromeOptions': {
            args: ['--test-type']
        }
    },

    suites: {
        login: ['LoginPage/login.js'],
        homePage: ['Homepage/homepage.js',
                   'Homepage/city_page.js',
                   'Homepage/admin_page.js'],
        adminPage: ['AdminPage/exam.js',
                    'AdminPage/location.js'

..

Within these .js files, I have implemented various functions that should be shared across all of my files. For instance:

describe('xxx', function () {

    it('xxx', function () {
        commonFunction(123);
    });

I aim to organize these common functions into their own separate file. However, I am uncertain about how to achieve this while ensuring accessibility from other JavaScript files. It appears that what I require is something akin to an "import" mechanism, which as far as I know currently does not exist. Therefore, I would greatly appreciate any guidance on how and where to store these common functions so they can be easily accessed from each of the *.js files present in the test suites.

javascript selenium selenium-webdriver jasmine protractor

Answer 1

Answer №1

To streamline my code, I utilize the page object pattern. This involves segregating the page objects into separate files and organizing them within a module.

For instance, within the file named pages.js, various page objects are stored.

'use strict';

(function() {
  var Application = function() {
    var app = this;
    browser.get('http://localhost:9003/');

    app.login = function() {
      element(by.buttonText('login')).click();
      return new LoginPage();
    };

    var LoginPage = function() {
      var loginPage = this;
      loginPage.withCredentials = function(login, password) {
        element(by.css('.loginField')).Keys(login);
        element(by.css('.passwordField')).Keys(password);
        element(by.buttonText('login')).click();
        return new WelcomePage();
      };
    };

    var WelcomePage = function() {
      var welcomePage = this;
      welcomePage.getGreetings = function() {
        return element(by.css('.greetings')).getText();
      };
    };
  };

  module.exports = function() {
    return new Application();
  };
}());

and these are then imported into my acceptance test using require:

'use strict';

var Application = require('./pages.js');
describe('The application', function() {
  it('should let you log into the application', function() {
    var application = new Application();

    var welcomePage = application.login().withCredentials('Jean', '!sz3sk,dz');

    expect(welcomePage.getGreetings()).toEqual('Welcome Jean');
  });
});

Answer 2

To streamline my code, I utilize the page object pattern. This involves segregating the page objects into separate files and organizing them within a module.

For instance, within the file named pages.js, various page objects are stored.

'use strict';

(function() {
  var Application = function() {
    var app = this;
    browser.get('http://localhost:9003/');

    app.login = function() {
      element(by.buttonText('login')).click();
      return new LoginPage();
    };

    var LoginPage = function() {
      var loginPage = this;
      loginPage.withCredentials = function(login, password) {
        element(by.css('.loginField')).Keys(login);
        element(by.css('.passwordField')).Keys(password);
        element(by.buttonText('login')).click();
        return new WelcomePage();
      };
    };

    var WelcomePage = function() {
      var welcomePage = this;
      welcomePage.getGreetings = function() {
        return element(by.css('.greetings')).getText();
      };
    };
  };

  module.exports = function() {
    return new Application();
  };
}());

and these are then imported into my acceptance test using require:

'use strict';

var Application = require('./pages.js');
describe('The application', function() {
  it('should let you log into the application', function() {
    var application = new Application();

    var welcomePage = application.login().withCredentials('Jean', '!sz3sk,dz');

    expect(welcomePage.getGreetings()).toEqual('Welcome Jean');
  });
});

What is the best way to configure shared functions that can be used across all of my test suites when working with Protractor and Selenium?

Answer №1

Similar questions

Can you provide instructions on how to create a fading effect when clicking on a button before redirecting to another linked website on the same page?

Combining CSS Selectors in Selenium

Attempting to perform a second HTTP GET request on a nodejs/express backend will result in an

Generate random positions for several divs using jQuery

Can the rxjs take operator be utilized to restrict the number of observables yielded by a service?

Generating a download link with an expiration feature in node.js or express for both frontend and backend operations

Node.js/Express - unable to retrieve client body data on server

How to designate a default selection value using local array data source in Select2.js version 4.0?

Navigating Error: net::ERR_CONNECTION while utilizing Puppeteer

Send out data every 250 milliseconds in a way that resembles debounceTime(), but without any waiting period

Refresh the div based on the script's output

Issues have been reported with the compatibility of Tailwind CSS when using it with Next.js and Shadow

Transfer the information of a selected element to a different element

The functionality of a website's design acts as a safeguard against unauthorized data transfers

Transferring data using AJAX when dragging and dropping an item from one list to another

What is the best way to save the city name received from geolocation into a variable and then make an AJAX request?

Using jQuery to fill input fields automatically with a mouse click rather than using the keyboard

Avoiding the backslash in JavaScript

Are there differences in alignment?

Having an issue with my Django model not properly saving data when receiving a POST