Creating a versatile protractor framework to streamline multiple project implementations

There's a concept in the works for creating a 'protractor core' that will be utilized by various projects for UI testing. Currently, I have an Angular project called 'project1' with e2e tests (cucumber-protractor-typescript) that cover 'project1'. As more projects like 'project 2', 'project 3', etc., require UI testing in the future, it would be beneficial to have a separate project termed 'protractor core' that can be used by any project for developing UI tests. The structure could look something like this:

  1. Project 1 >>> (depends on 'protractor core')

    • Features
    • Step_definitions > (access to API, common functionality)

  2. Project 2 >>> (depends on 'protractor core')

    • Features
    • Step_definitions > (access to API, common functionality)

  3. Project 3 >>> (depends on 'protractor core')

    • Features
    • Step_definitions > (access to API, common functionality)

Any examples, ideas or suggestions are greatly appreciated!

angularjstypescriptprotractorcucumber

Answer №1

To begin with, it is important to understand that Protractor is not specific to any project. The configuration file used to run your tests will execute every file assigned to it, which may come from various project folders.

If you already have a separate config file for each project, consider creating a new consolidated one at the top level of each project and assign all projects to it. One way to achieve this is by using the "suite" option.

Below is an example snippet of how your config file (e.g., protractor.conf.js) could be structured with this option:

exports.config = {
  suites: {
    project1: ['Project1/tests/e2e/**/*.js'],
    project2: ['Project2/tests/e2e/**/*.js'],
    project3: ['Project3/tests/e2e/**/*.js']
  },
// additional options

Ensure that your config file is placed at the top level of the folder structure. If not, adjust the paths based on your desired folder layout (once again, remember that Protractor is file-centric, not project-centric).

To run your tests, use the following command:

protractor protractor.conf.js --suite project1 
# incorporate other options as per your config file settings

Maintaining version control is another aspect to consider for the long-term manageability of your test suite.

Answer №2

Currently, I am in the process of working on a project that bears striking resemblance to yours.

An interesting observation I have made is that there seems to be duplicate page objects and helper classes/functions spread across various projects. In order to streamline this, we are developing an npm package for our protractor framework (including page objects, helper classes, etc.) and storing it on our ProGet server. This enables every team to access the same framework effortlessly by simply incorporating it into their respective projects like any other npm package. Although each project maintains its own configuration and tests, sharing the framework among multiple projects helps prevent redundant resources within different repositories.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having trouble with Next.js 13 GitHub OAuth integration - it keeps redirecting me to Discord instead of signing me in

There's a perplexing issue troubling my application... The implementation of OAuth 2 with GitHub, Discord, and Google is causing some trouble. While Google and Discord authentication works smoothly, attempting to sign in via GitHub redirects me to Di ...

typescriptnext.jsoauth-2.0oauthreact-fullstack

Steps for integrating a valid SSL certificate into a Reactjs application

After completing my ReactJS app for my website, I am now ready to launch it in production mode. The only hurdle I face is getting it to work under https mode. This app was developed using create-react-app in a local environment and has since been deployed ...

javascriptreactjstypescriptsslssl-certificate

Guide on creating a typed object variable in Typescript

In my Typescript code, I have an interface called Employees: export interface Employees { [employeeId: string]: { name: string gender: Gender } } I am trying to declare a variable employees that is of type Employees. Here are the attempts I h ...

typescript

Creating a pattern for values ranging from 18 to 99, including leading zeros, using regular expressions

Looking for a Regular Expression that matches numbers from 018 to 099, inclusive. The numbers must range between 18 and 99, and include a leading zero for values less than 100. ...

javascriptangularjsregexng-pattern

Ensure execution post completion of evalAsync process

I am relatively new to working with JavaScript and Angular technology. I have encountered a situation where two separate pieces of code are running in different callbacks, triggered by third-party libraries (specifically Kendo UI library callbacks). One f ...

javascriptangularjsrace-condition

AngularJS seems to be failing to display the initial option in the input select field

When using Angularjs, binding an input select to the model results in a new empty option being created <option value="? undefined:undefined ?"></option> Here is an example of the code: <select name="category" ng-model="hotspot.category"&g ...

javascripthtmlangularjs

Is there a way to efficiently parse HTML data returned as JSON in the browser using Cordova/Ionic?

Currently, I am retrieving data from a Drupal service and using AngularJS along with the ionic framework to create a hybrid app for mobile platforms, leveraging Cordova or Phonegap. You can check out my code on codepen: http://codepen.io/BruceWhealtonSWE/p ...

htmljsonangularjscordovaionic-framework

Is there a way to selectively filter and display certain data in an Angular data table?

https://i.sstatic.net/0N3OZ.jpg I am currently working on a project using Angular 7 frameworks that involves dealing with large amounts of data. One of the tasks is to filter out trial units based on the 'userName' field in the raw data. I have ...

angulartypescript

Unable to expand or collapse rows in ng-table

Looking to implement an expand and collapse feature for ng-table, where clicking on a row should expand it to show more detail. However, currently all rows expand on click. Any ideas on how to achieve this? Any assistance would be greatly appreciated, tha ...

javascripthtmlangularjs

Transforming a flat TypeScript array into a nested object structure

I'm working on implementing a user interface to offer a comprehensive overview of our LDAP branches. To achieve this, I plan to utilize Angular Materials Tree as it provides a smooth and intuitive browsing experience through all the branches (https:// ...

javascriptarraysjsonangulartypescript

Performance issues arising from the slow loading of multiple mat tables within a single component

Within a single component, I have 3 mat tables and I am loading their data on page load. Even with fewer than 500 records for all 3 tables, it takes 8-10 seconds to load the data. <div id="div1" [hidden]="!( div1===1 ...

angularjsmat-tableangular-material-tableangular-material-7

AngularJS chatbox widget for interactive communication

Currently, I am in the process of developing the back-end for a web application utilizing angularJS. One of the key features is allowing users to communicate with each other through a pop-up chat box similar to those found in Gmail or Facebook. My goal is ...

javascripthtmlnode.jsangularjsangular-bootstrap

There seems to be an issue with the Typescript version compatibility in the node_modules folder for the Angular Material table cell component

While working on my project with Angular, I encountered an issue. I attempted to downgrade my TypeScript version to 3.9.7 but the problem persists. Below are the dependencies listed in my package.json: "private": true, "dependencies&qu ...

javascriptangulartypescriptangular-clitslint

Filtering Array Elements with AngularJS Repeater

Can I customize my ng-repeat to filter through an array or object? Currently, I am populating via an http request like this: <div class="ibox" ng-repeat="data in appraisals track by $index"> However, I am wondering if there is a way to apply a fi ...

angularjs

Struggling to properly test the functionality of my NgForm call in Angular2+

I've been trying to test the login functionality by inputting username and password in an NgForm, but I keep encountering unsuccessful attempts. Is there a vital step that I may be overlooking? Currently, I'm facing this error message: Chrome 6 ...

javascriptangulartypescriptangularjs-ng-form

Having trouble retrieving data from a factory in the controller

I'm currently working on my first angular application and running into an issue accessing data in the controller that's coming from a service. The service code looks like this: var BASE= " "; loginApp.factory('authFactory',function ($ ...

angularjs

typescriptCreating a custom useFetch hook with TypeScript and Axios

I have a query regarding the utilization of the useFetch hook with TypeScript and Axios. I came across an example of the useFetch hook in JavaScript, but I need help adapting it for TypeScript. The JavaScript implementation only handles response and error ...

javascriptreactjstypescriptaxios

Nestjs: Step-by-step guide to removing a specific application from a Nestjs monorepo using nest/cli

Is there a method to delete a specific app within a nestjs monorepo using the nest/cli? I have searched through the documentation and developer forums but cannot seem to find a solution. ...

node.jstypescriptnestjsnestjs-config

"Troubleshooting the issue of Angular's ng-selected not functioning properly within an edit

https://i.stack.imgur.com/ZpCmx.png https://i.stack.imgur.com/h3TA6.png TS Pincodes: Array<string> = []; Html <ng-select [items]="Pincodes" [searchable]="true" [multiple]="true" [(ngModel)]="updateZoneDetails ...

typescriptangular-ngselectangular16

Implementing ui-sref-active for intricate routing states

I have implemented the menu link using AngularJS and UI-Router. <li ui-sref-active="active"> <a ui-sref="dashboard" title="Dashboard"><i class="fa fa-lg fa-fw fa-home"></i> <span class="menu-item-parent">Dashboard</spa ...

javascriptangularjs