Challenges and solutions in writing Protractor test cases

Recently delving into protractor e2e testing, I have developed my first test code. Seeking feedback and suggestions for improvement.

  describe("Map feedback Automation",function(){
it("Check if the Url works ",function()
{
    browser.get(browser.params.url);
    expect(browser.getCurrentUrl()).toContain("report");

});it("test browser should reach report road option",function()
{
    element.all(by.css('div[ng-click="setLocation(\'report_road\')"]')).click();
    expect(browser.getCurrentUrl()).toContain("report_road");

});


it("test browser should reach report road missing",function()
{
    element.all(by.css('div[ ng-click="mapFeedBack.editObject= mapFeedBack.createMapObjectModel();setLocation(mapFeedBack.noMap?\'road_new\':\'choose_location_road_new/road_new\')"]')).click();
    expect(browser.getCurrentUrl()).toContain("choose_location_road_new/road_new");
    browser.sleep(browser.params.sleeptime);
});


it("test browser should zoom on map ",function() //manual 
{


element.all(by.css('div[ng-click="zoomIn()"]')).click();            
browser.sleep(browser.params.sleeptime);
element.all(by.css('div[ng-click="zoomIn()"]')).click();
browser.sleep(browser.params.sleeptime);


element.all(by.css('div[ng-click="zoomIn()"]')).click();
browser.sleep(browser.params.sleeptime);

element.all(by.css('div[ng-click="zoomIn()"]')).click();
browser.sleep(browser.params.sleeptime);


}); 

it("Should click on ok option",function()
{

    element(by.buttonText('OK')).click();
    expect(browser.getCurrentUrl()).toContain("road_new");

}); 
it("test browser should reach report road option",function()
{

    browser.sleep(browser.params.sleeptime);
    expect(browser.getCurrentUrl()).toContain("road_new");

}); 



it("should  enter a road name",function() 
{       

 browser.sleep(browser.params.sleeptime);

 var testroadname = browser.params.testroadname;


 element(by.model("mapFeedBack.editObject.roadName")).sendKeys(testroadname);
browser.sleep(browser.params.sleeptime);




});


    it("should check the type of road is highway",function()  //spec3
{

element(by.model("mapFeedBack.editObject[attrs.select].selected")).$("[value='string:app.road.roadType.highway']").click();




});


    it("should  submmit the map feedback",function() 
{       

element(by.css('button[ng-click="onSubmit({reportType: reportType})"]')).click();
    browser.sleep(browser.params.sleeptime);
});});

A colleague suggested removing the delay

browser.sleep(browser.params.sleeptime);

and incorporating some event trigger when the zoom in button is clicked. How can I achieve this effectively?

Answer №1

In the world of coding, each piece of code has its own unique scent. One particularly unpleasant odor that arises from Protractor-specific code is the reliance on browser.sleep() to address timing issues. Using browser.sleep() tends to significantly slow down tests unnecessarily and can sometimes fail to introduce a sufficient delay for a test to pass, leading developers to increase the sleep duration, thereby further slowing down the test process. It's worth noting that there exists a relevant third-party ESLint rule designed to discourage the use of browser.sleep() in e2e codebases.

An alternative approach that offers greater resilience over hardcoded delays involves utilizing browser.wait() alongside a selection of predefined Expected Conditions. The key benefit here lies in the fact that browser.wait() will patiently wait as long as necessary, continuously monitoring the status of the expected condition.

For instance, you could enhance your test automation efforts by employing the elementToBeClickable condition:

var EC = protractor.ExpectedConditions;
var elm = element(by.id("myid"));

browser.wait(EC.elementToBeClickable(elm), 10000);
elm.click();

With this configuration, Protractor will wait for (note the emphasis on "for") up to 10 seconds (still essential to specify a timeout interval) and will trigger a Timeout Exception if the specified element does not become clickable within the stipulated timeframe.

Answer №2

Another option is to patiently await the appearance of the button by executing the subsequent waiting command:

var clickButton = element(by.css("mycss"));
browser.driver.wait(protractor.until.elementIsVisible(clickButton), 5000);
clickButton.click();

In this context, visibility indicates that the element is not only viewable, but also possesses dimensions (height and width) greater than zero.

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

The function DataTable is not defined in jQuery(...)

When attempting to use jQuery DataTable with Angular JS in my ServiceNow application, I encountered the error message jQuery(...).DataTable is not a function. To resolve this issue, I created a variable 'j' to prevent conflicts between jQuery and ...

The Angular2 application successfully loads on the first attempt, but encounters an error when attempting hot-reloading, displaying the message "The selector 'app' does not correspond to any

SOLVED: The issue I encountered was related to my package.json. I discovered that it was an outdated version missing some of the necessary scripts and dependencies, unlike the one I referenced in my post. Oddly enough, I was still able to run the scripts a ...

Tips on updating an HTML page following the receipt of a CURL request by a PHP script

I am currently developing a unique login system with customized requirements. The HTML form will submit data to a PHP script using AJAX, which will then forward the information to another PHP script for processing through CURL. After some time has passed ...

Unable to transfer Base64 encoded data to C# through AJAX

I'm facing an issue where a base64 string I send through ajax to an aspx page with C# code behind always arrives empty. Despite other form fields posting successfully, this particular string is not making it through. The base64 string in question app ...

Using C# within a JavaScript Element on a CSHTML webpage

Is there a way to integrate C# code into a JavaScript statement? Below is an example of the code I am trying to use: document.getElementById('part1').innerHTML = '' + '@Html.Partial("SelectCustomer.Views")' ' Views&apos ...

Unable to access account due to login function malfunctioning

I've created a login button with this function code, but I keep getting the error message "Login unsuccessful, Please try again..." Thank you in advance. I wasn't entirely sure what you needed, so I included most of the code because I've b ...

A guide on extracting data from various HTML elements effectively with JavaScript

I'm searching for a universal technique to extract values from multiple HTML elements. For instance: <div>Experiment</div> <select><option>Experiment</option></select> <input value="Experiment" /> These thr ...

Developing a Modal Dialog Using AngularJS Controller

Creating a Modal Dialog directly within an HTML file is achievable, but when it comes to triggering the popup from a controller after performing some logic, such as service calls and data validation, things get tricky. The goal is to inform the user about ...

The attribute "value" for Material-UI autocomplete cannot be used in conjunction with the "getOptionLabel" attribute

<Autocomplete id="license-select" options={licReqList} value = {licReqList[0] ? licReqList[0].licReqStr : null} getOptionLabel={(option) => option.licReqStr} onChange={ha ...

Blogger Extension - Cross Domain Communication

As I work on creating a blogger plugin, my goal is to send information from the blog page for analytic purposes and then display the results on the visitor's page. Initially, I tried sending the page content using an ajax call but encountered an error ...

Tips for Transferring Values Between Multiple Dropdown Menus with jQuery

Hello there, can anyone guide me on how to transfer selected items from one multiple combo box to another multi-combo box? I would really appreciate it if someone could provide an example for this scenario. <HTML> <HEAD> <TITLE></T ...

Encountering a null value after making changes to the state in Reactjs

I'm currently working on a drag-and-drop web application using reactjs. The issue I'm encountering is that when I initiate the drag action, it triggers the handleDragStart function to update the state variable called selectedCard. However, when I ...

Using TypeScript's reference function within an HTML document

It feels like ages since my early days of web development. Back when I first started coding, we would reference a script using a <script> tag: <html> <head> <script src="lealet.js"></script> <!-- I know the path isn´t c ...

Why is it that a specific variable is only undefined in one specific location within the entire component?

import React from 'react'; import { Formik, Form } from "formik"; import { InputField } from "./formui/InputField"; import { applyGharwapasi } from "../../appollo/applyGharwapasi/applyGharwapasi"; import { useMutatio ...

When attempting to access AngularJS and ng-repeat elements before they have been rendered in the DOM, a NULL exception error occurs

I am currently facing an issue where I am utilizing a function from an external library to manipulate the DOM within one of my controllers that is linked to ng-repeat. The challenge at hand is this: Even though I have added elements to the ng-repeat array ...

TestingCompilerFactory is not available as a provider

Currently troubleshooting my test file to identify the issue that is hindering a successful test run: import { async, ComponentFixture, TestBed } from '@angular/core/testing'; import { Component, Directive, Input, OnInit } from '@angula ...

The functionality of AJAX is hindered in the browser when attempting to fetch data from a URL

Lately, I've been encountering a strange issue when trying to fetch data from a URL. $.ajax({ url: 'URLHERE', dataType: 'html', success: function(data) { //function 2 var xml = $.parseXML(data) $(xml).find('StopLoca ...

React doesn't have file upload configured to update the state

I am working on integrating a file upload button that sends data to an API. To ensure only the button triggers the upload dialog and not the input field, I have set it up this way. Issue: The File is not being saved to state, preventing me from using a ...

Trick to enable editing in Bootstrap Select Combobox

Is there a way for users to add their own options to bootstrap-select? Greetings! I have spent some time searching for a straightforward solution that is compatible with Bootstrap 4 styling. Despite exploring various suggestions, as well as unresolved thr ...

Is there a way to dynamically update the TargetControlID of an AutoCompleteExtender using client-side JavaScript?

Typically, I am able to set the TargetControlID on the server side using code similar to this: AutoCompleteExtender ace = new AutoCompleteExtender(); ace.ID = "AutoCompleteExtender1"; ace.TargetControlID = "whatever"; While I understand how t ...