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);
};