Let me start by sharing some details about my machine setup:
- Operating System: CentOS 7
- Graphics Drivers: kmod-nvidia (dedicated GPU)
I am currently testing a webpage using Nightwatch, and one of the requirements is to ensure that a background image's height is as expected.
To sum up the issue I'm facing: I need to confirm that the background image (or containing div) has a height of calc(90vh - 200). So far, I've been getting inconsistent values across different browsers. Firefox seems to be the only one giving accurate results.
Here are the findings from my troubleshooting process:
- Rendering Browser: The browser used by Nightwatch for page rendering during testing
- Window.innerHeight: Viewport height used for calculating the expected height
- Computed Value: Expected height calculation (innerHeight x 0.9 - 200)
- Test Expected: Desired value in the Nightwatch test.
- The test: client.verify.cssProperty("div.Background", "height", data.value.height);
- Data variable stores the computed (expected) height retrieved from a client.execute() function.
Test Actual: Actual rendered value reported by Nightwatch.
Nightwatch's default browser (PhantomJS)
- Viewport = 1080
- Computed (height) = 772
- Expected = 772
- Actual = 600
Chrome
- Viewport = 967
- Computed = 670.3
- Expected = 670.300000001
- Actual = 670.297
Firefox
- Viewport = 945
- Computed = 650.5
- Expected = 650.5
- Actual = 650.5
We have our custom hosted port for Nightwatch separate from selenium. The values observed here differ slightly from the above browsers, with slight variations even on local chrome instances.
Furthermore, when attempting to fetch this information directly from the DOM using client.execute(), any element height iteration returns "unknown."
Here is an example code snippet showcasing the methods mentioned above:
client.resizeWindow(1920, 1080);
client.waitForElementVisible("background", 3000); // passes
// Outputs incorrect value
client.getElementSize("div.background", (elementSize) => {
console.log("elementSize: " + elementSize.value.height);
});
// Executes height computation and comparison
client.execute(function() {
var data = {};
var el = document.getElementsByClassName("background").clientHeight;
data.height = ((0.9 * window.innerHeight) - 200);
data.elementHeight = "height: " + el + "px";
return data;
}, [], (data) => {
console.log("computed Height: " + data.value.height);
console.log("element height: " + data.value.elementHeight);
client.verify.cssProperty("div.background", height, data.value.height);
})
In addition, there were concerns about my graphics driver causing these discrepancies, but after investigation, it was ruled out today.
Thank you in advance for any insights or feedback regarding this matter!