Jenkins server is encountering failing Protractor test cases, while they successfully pass on a local machine. The error message displayed is "Element is not clickable

In my script, I have developed a functionality to create and delete a form, triggering a modal dialogue box with "Create" & "Delete" buttons. The script works fine on my local machine but fails on the Jenkins server with the following error message:

[31mUnknownError: unknown error: Element is not clickable at point (370, 24). Other element would receive the click: <div class="modal-backdrop fade" ng-class="{in: animate}" ng-style="{'z-index': 1040 + (index && 1 || 0) + index*10}" modal-backdrop="" style="z-index: 1031;"></div>
  (Session info: chrome=37.0.2062.124)
  (Driver info: chromedriver=2.9.248315,platform=Windows NT 6.1 SP1 x86_64)[0m

Below is the test script:

describe('Tests Scripts', function () {
    var baseurl = `"http://test/index.html"`;
    var url = `"/index.html"`;
    var driver = browser.driver;
    var ptor = protractor.getInstance();
    var tabIndex = 1;

    beforeEach(function () {
        ptor.ignoreSynchronization = true;
    });

    it('WILL load the page', function () {
        browser.get(baseurl);
        helper.waitForElementByXpath('//*[@id="xyz"]/ul/li/a/i');
        expect(browser.driver.isElementPresent(by.xpath('//*[@id="xyz"]/ul/li/a/i'))).toBeTruthy();
        expect(browser.getCurrentUrl()).toContain(url);
    });

    it('Delete the form', function () {
        element(by.xpath('//*[@id="xyz"]/ul/li/a/i')).click().then(() => {
            helper.waitForElementById('controlItem');
            element(by.id('controlItem')).click().then(()=> {
                helper.waitForElementById('modalDialogue');
                var form_name = "DeleteForm";
                element(by.id('title')).sendKeys(form_name);
                browser.wait(function () {
                helper.clickByIDAndWait('createbutton');
                tabIndex++;
                    return true;
                }, 5000).then(function () {
                browser.getCurrentUrl().then(function (curr_url) {
                    var arr_url = curr_url.split(':');
                    var instance_id = arr_url[arr_url.length - 1];
                    helper.clickByXpathAndWait('//*[@id="windowTab-1"]/a');
                    helper.waitForElementById('form-control');
                    var xp = '//*[@id="Forms-' + instance_id + '"]/td[2]';
                    expect(driver.isElementPresent(by.xpath(xp))).toBeTruthy();

                    element(by.id('deleteForm-' + instance_id)).click().then(()=> {
                        helper.waitForElementById('DeleteFormModal');
                            browser.wait(function () {
                        helper.clickByIDAndWait('modal-deleteForm-btn');
                                return true;
                            }, 5000).then(function () {
                        helper.waitForElementById(form-control');
                        expect(driver.isElementPresent(by.xpath(xp))).toBeFalsy();
                    });
                });
            });
        });
    });

Here are the custom functions used in the code:

var clickByIDAndWait = function (btnId) {
    var returnVal = false;
    browser.wait(function () {
        if (!returnVal) {
            element(by.id(btnId)).click().then(function () {
                returnVal = true;
            });
        }
        return returnVal;
    }, 30000);
};

var waitForElementById = function(elementId){
    browser.wait(function(){
        return browser.driver.isElementPresent(by.id(elementId));
    },30000);
};

Answer №1

Success! I've managed to find the solution.

After some tweaks in the test cases, things are running smoothly on Jenkins now. It seems that the issue was related to the focus not moving automatically to the element when at the bottom of the page. By restructuring the test cases to prevent the focus from reaching the bottom, I have managed to resolve the issue. Additionally, I am now resetting the window size before each test case using the following code in the beforeEach function:

beforeEach(function () {
    ptor.ignoreSynchronization = true;
    browser.driver.manage().window().setSize(1280, 1024);
});

While I cannot guarantee this solution will work for everyone, it has been successful for me. Feel free to give it a try and see how it goes.

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

Utilizing an external JavaScript file with Node.js and ExpressJS

Today I delved into NodeJS, ExpressJS, and Android in order to build a small web application. However, I encountered a frustrating issue that consumed my entire day! Environment: Server: NodeJS, ExpressJS Client: HTML, Angular, CSS I attempted to load ...

Retrieve the value of angular js http.get when the response is in text format

I am working with an angular js controller that has a http get method. I need to retrieve the response value of the http request. In the headers, I have included: -H "Content-Type: application/json" -H "Authorization: Basic YGDJSDJH4564363YTESNSBS4=" The ...

There seems to be a limitation in JS/JQuery where it is unable to append HTML that spans

I am encountering an issue with retrieving data in a div element. It seems that the function provided does not work correctly for files larger than a single line of code or even possibly a string. What can be done to resolve this? <ul class="dropdo ...

Sending an Angular $http post request to a MVC action but the parameter is coming through as

After posting this content: $http.post(Common.blog.save, { blog: blog }) .then(saveBlogComplete) .catch(function(message) { }); The Fiddler output I receive is as follows: {"blog":{"title":"Chicken Is Good","content":"#Chicken Is Good\ ...

Tips for executing forEach on a promise?

I am currently working with a function that returns a promise of an array: async function functionReturningPromiseOfUserIDs(): Promise<string[]> My question is, can I use the forEach method on the array returned by this function? async function runF ...

Is there a way to use Selenium to automate the clicking of two buttons with empty href attributes? Each button has a function name and arguments within the href

Here is the HTML code for both buttons: <td> <a href="javascript:abcMy(2310);" class="btn btn-lawa btn-primary btn-primary-lawa">View</a> </td> <td> <a href="javascript:abcMy(2330);" class="btn btn-lawa btn-primary btn ...

Switching the dialogue with no need for a refresh

I am working on a feature for my website where I want to switch the language seamlessly without having to reload the page when a user clicks on one of three language flags (German, French, and English). When a flag is clicked, I store a cookie called lang ...

When $routeChangeStart is triggered, the location fails to locate the corresponding template

In my web application, I have an app variable associated with the module myApp. There are 3 pages: /login, /registration, and /. The behavior of $routeChangeStart is defined as follows: First, it checks if a global variable user is defined. If yes, it mo ...

Managing messaging broadcasts for messenger bots by creating and retrieving unique identifiers

As a beginner using a starter project from glitch, I have a project set up at this link: I need help understanding how to obtain the message_broadcast_id and how to create it. This is how I usually create a normal message: function callSendAPI(messageDa ...

Using ExpressJS and Jade to submit a form using the POST method and redirecting to a specified path

I am exploring node, express and jade for the first time and working on a small application that requires users to enter their name and password in a form. The app then redirects them to a path based on their username. Here is the code snippet to achieve ...

Sending data from express js to a different server

Currently, I am faced with a scenario where I need to send a file from Jquery to my Express server and then transfer that request to another server without parsing the file in the Express server. Below are the code snippets I have been using so far: Jquery ...

Automated library that refreshes the webpage instantly upon any server modifications

Seeking a Javascript solution to automatically refresh a webpage when the server version is updated. Update: I am aware of the technical aspects involved and how to implement this feature. However, I am interested in finding an existing solution that I ca ...

Trigger the animation with a button click by utilizing ng-class in Angular.js

How can I make an animation run more than once when a button is clicked? I've tried using ng-class but it's not working as expected. Any help would be appreciated. Thank you! <div ng-controller="MyCtrl"> <div class='contendor_port ...

Guide to creating a versatile navigation bar using Bootstrap and HTML

I am looking to create a navigation menu that can be easily reused across multiple pages on my bootstrap/html website. Instead of duplicating code, I want to implement a solution for creating a reusable navigation menu in bootstrap/html. How can this be ...

JQuery does not operate on content that is fetched through ajax requests

I've been struggling with this issue for quite some time now and I just can't seem to figure out what I'm doing wrong. (I suspect it's related to the ajax response) I attempted to upload an image to the server using the uploadifive plu ...

Store additional data with the visitor ID WEB in Fingerprint JS V3

After browsing through similar questions, I couldn't find a solution that fits my needs. Basically, I have a website where a random emoji is generated and stored in local storage. However, this method is not effective as users can easily delete their ...

Update a specific HTML element when the result of an equation is modified

I need assistance with my angularjs website development project. I have implemented content-specific tabs, each with its own unique content. When a tab is selected, only the corresponding content should be displayed. The tabs are assigned IDs in the contro ...

Gather and consolidate all files into a single file using Node.js / JavaScript

I currently have 3 JSON files located in my project/Folder file1.json { "id":"01", "name":"abc", "subject":[ "subject1":"Maths", "subject2":"Science" ...

Choose an item from a list that does not have a particular class

Here is a list of items: <ul id='myList'> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li class='item-selected'>Item 4</li> <li>Item 5</li> & ...

Tips for implementing jQuery on a CSS selector's :before pseudo-element

My dilemma involves creating a div using CSS with an added X at the top-right corner using the before pseudo-class. How can I implement a function to close this div by clicking on the X with the assistance of javascript? https://i.sstatic.net/Z5uSq.png C ...