Selenium Cucumber Fails to Check for Image - selenium-chromedriver

Question

I was trying to test one of my web application using selenium-cucumber-js.
I have a Feature file written using the Gherkin syntax.
Feature: UPS XXX Troubleshooting
#
##Chatbot must start automatically
Scenario: Chatbot automatically says hello
Given a chat window "localhost:3000/"
Then the text displayed in position "1" shall contain following statements
| statement |
| Hey there! I’m a bot that can help you troubleshoot issues with UPS. |
| We’ll first need to determine exactly which UPS you have by collecting the model and serial number from its bottom or rear panel. It will be found on a white, rectangular sticker with two barcodes. |
| Please enter your Model Number from the barcode sticker |
And there shall be at least an embedded image in position "2" containing "UPSBarCode.jpg" file
I have written the Step definitions below
const timeout=60000
module.exports = function () {
this.Given(/^a chat window "([^"]*)"$/, function (url) {
return helpers.loadPage(url);
})
this.When(/^there shall be at least an embedded image in position "([^"]*)" containing "([^"]*)" file$/, function (position, jpgOrPng) {
return page.apcupsTroubleshooting.expectImage(jpgOrPng, position, timeout);
})
this.Then(/the text displayed in position "([^"]*)" shall contain following statements$/, function (position, table) {
table.rows().forEach(function (option, index) {
console.log("checking " + option);
return page.apcupsTroubleshooting.expectChatbotText(option[0], position, timeout);
});
})
};
Here is my Page objects
const expect = require('chai').expect;
module.exports = {
url: 'localhost:3000/',
elements: {
textInput: by.name("inputText"),
textOutputs: by.className("message")
},
/**
* types something in chatbot
* #param {any} userInput
*/
typeMessage: function (userInput) {
console.log("Going to type '" + userInput + "'");
var selector = page.apcupsTroubleshooting.elements.textInput;
return driver.findElement(selector).sendKeys(userInput, selenium.Key.ENTER);
},
expectChatbotText: function (text, position, timeout) {
console.log("checking '" + text + "'");
theXpath = "//div[#class='message']//p[contains(text(),\"" + text + "\")]";
console.log("xpath:" + theXpath)
return driver.wait(until.elementsLocated(by.xpath(theXpath)), timeout)
.then(() => {
driver.findElement(by.xpath(theXpath)).getText()
.then(t => {
try {
expect(t).to.contain(text)
}
catch (e)
{
return Promise.reject(false)
}
})
})
},
expectImage: function (imageFile, position, timeout) {
console.log("checking image " + imageFile + " existance in position " + position);
theXpath = " //img[contains(#src,'" + imageFile + "')]";
return driver.wait(
until.elementsLocated(by.css('.cardImage')), timeout)
.then(() => {
console.log('xxxxxxxxxxxxxxxxxxxx')
driver.FindElements(by.css('.cardImage'))
.then(t => {
console.log('yyyyyyyyyyyyyy')
try {
expect(t[0].GetAttribute("src").ToString()).to.contain(imageFile)
}
catch (e)
{
return Promise.reject(false)
}
})
})
},
checkOptionElement: function (option, position, timeout) {
console.log("checking list entry " + option + " existance in frame " + position);
theXpath = " //div[#class='card']/div/ul/li[contains(text(),\"" + option +"\")]";
return driver.wait(until.elementsLocated(by.xpath(theXpath)), timeout)
.then(() => {
return driver.findElement(by.xpath(theXpath));
})
}
};
Here is my html page
<section class="messages-wrapper">
<div class="messages">
<div class="group group-bot" id="message-group-bot-1">
<div>
<div>
<div class="messageParentContainer">
<div class="message">
<p>
<div>Hey there! I’m a bot that can help you troubleshoot issues with UPS.</div>
</p>
</div>
</div>
</div>
</div>
<div>
<div>
<div class="">
<div class="message">
<p>
<div>We’ll first need to determine exactly which UPS you have by collecting the model and serial number from its bottom or rear panel. It will be found on a white, rectangular sticker with two barcodes.</div>
</p>
<div class="cardImageContainer"> <img class="cardImage" src="https://somedomain/UPSBarCode.jpg"></div>
<div class="hide-container"> <object class="videoFrame" data=""></object></div>
</div>
</div>
</div>
</div>
<div>
<div>
<div class="messageParentContainer">
<div class="message">
<p>
<div>Please enter your Model Number from the barcode sticker</div>
</p>
</div>
</div>
</div>
</div>
</div>
<div style="float: left; clear: both;"></div>
</div>
</section>
I have also tried
expectImage: function (imageFile, position, timeout) {
console.log("checking image " + imageFile + " existance in position " + position);
theXpath = " //img[contains(#src,'" + imageFile + "')]";
return driver.wait(until.elementsLocated(by.xpath(theXpath)), timeout)
.then(() => {
return driver.findElement(by.xpath(theXpath));
})
},
So my problem is, I am not able to detect the Image so that the tests are failing. How to solve this issue?

Answer 1

I don't see the issue just by inspection, but a few things you could try:
Use FindElement instead of FindElements. FindElement will (helpfully) fail immediately if the element is not found, instead of happily finding nothing and passing an empty array downstream to fail in a more confusing way later.
I've had issues where the page simply wasn't in the expected state when the assertion ran, which is really frustrating when you look at the page a few milliseconds later and it's right there. You might try dumping the entire DOM to console just before the assertion (I think it's driver.getPageSource(), but don't quote me).
Some gratuitous, cheeky code review you didn't ask for (sorry):
When I'm debugging, I find it tremendously helpful for the step definition to follow the same flow as the feature file, and to make sure each step has the same Given/When/Then prefix in both places (it's kind of a nit, but you have a Then as a When currently).
Sometimes a whole set of problems will go away if you keep your regex as narrow as possible. I doubt this is related to your immediate problem, but those position number capture groups could be defined to only accept digits (%d+), and then you could even drop the double quotes if you prefer.
I've had great luck defining locators (e.g. by.css('.cardImage')) in a single location of the page object, so they aren't duplicated