Experiencing discrepancies in pixel height while conducting tests using Nightwatch

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.

    1. Nightwatch's default browser (PhantomJS)

      • Viewport = 1080
      • Computed (height) = 772
      • Expected = 772
      • Actual = 600
    2. Chrome

      • Viewport = 967
      • Computed = 670.3
      • Expected = 670.300000001
      • Actual = 670.297
    3. Firefox

      • Viewport = 945
      • Computed = 650.5
      • Expected = 650.5
      • Actual = 650.5
    4. 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!

Answer №1

The small discrepancies in Chrome that I noticed seem to be well within the margin of error of their calculation algorithm. However, it became clear that my main issue stemmed from the Phantom.js browser used by Nightwatch.js.

Upon further investigation, I observed a peculiar behavior when creating a mock HTML page in Plunker. It appeared that the calc function was causing problems with divs containing background images. Removing the calc() function allowed the image to load successfully.

Example HTML:

<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="doTheThing"></div>
  </body>
</html>

Example CSS:

.doTheThing: {
  background-image: url('insertRandomImageUrlHere');
  height: calc(90vh - 200); //did not work. Image did not load
  height: 90vh; //worked, image loaded.
}

This puzzling behavior led me to delve deeper into the rendering browser, Phantom.js. Upon exploring this specific issue, I stumbled upon a related problem documented here: https://github.com/ariya/phantomjs/issues/13547

It is probable that Phantom.js is inaccurately computing the calc() function, resulting in pixel discrepancies. (Furthermore, the 600px mentioned in the original post may have been due to a min-height setting, leading to a computed value below 600.)

While this explanation seems plausible, I believe further inquiry should be directed towards the Phantom.js team to confirm any updates on this matter. I will amend my response accordingly if conflicting evidence emerges.

I will include my new question below once it is created.

Phantomjs browser incorrectly computing css calc() function in Nightwatch tests

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

Update a Div, Table, or TR element without the need for a page reload or Ajax usage

How can I refresh a div, table or <tr>? The data displayed is not coming from a database, it's just a simple error block and the value comes from Java-script. The issue arises when a user inputs a value in a textbox, the value gets stored in th ...

In React-router-dom version 5, match.params.id functions properly, but it experiences issues in version 6

Can anyone help me figure out the proper way to achieve this functionality in react-router version 6? When I use console.log with match, it returns undefined, even though it works fine in v5. import React from 'react' const NotePage = ({ match } ...

Problems with Emulating Chrome | Using Media Queries

Currently, I am in the midst of testing my responsive website and I have encountered an issue with the Chrome emulator. When I select a specific device like "iPhone 6", the responsive views are not displaying correctly. Instead, unsightly scroll bars appea ...

Having trouble getting the .replace() Javascript function to work on mobile devices?

I have a code snippet for implementing Google Analytics. Here it is: $(function () { $('.plan-choose-btn a').bind('click', function(e) { //ga load image <% String myaccGAEventUrl = trackGoogleAnalyticsEvent(requ ...

Adjust the active carousel item to 0 within onsen-ui (displaying a list of carousel items in a sliding menu)

In my sliding menu, each menu item contains a carousel with two items. I am trying to make the first carousel item show after closing and reopening the menu, or by clicking a button outside of the list on the menu page. This is my current setup: <ons- ...

Toggle the status of active to inactive instantaneously with the click of a

Incorporating DataTables with ajax using PHP CodeIgniter Framework has presented me with a challenge. I am struggling to toggle between Active and Inactive buttons seamlessly. My desired outcome: When the Active button is clicked, it should transition ...

Angular custom filter applied only when a button is clicked

I have recently started exploring angular custom filters and I am curious to know if there is a way to trigger the filters in an ng-repeat only upon clicking a button. Check out this example on jsfiddle : http://jsfiddle.net/toddmotto/53Xuk/ <div ...

Instructions on opening a modal and changing the source of the iframe within the modal

I currently have a modal within my application that is triggered by Bootstrap: <div class="modal full-page fade" tabindex="-1" role="dialog" id="fullpageModal"> <div class="full-page-content"> <button type="button" class="close" d ...

The catch block is triggered when the dispatch function is called within the try block

It's strange how the code below works perfectly without any errors and records a response once the loginHandler() function is triggered. However, when I include the dispatch function inside the try block after receiving the response, the catch block e ...

Verifying the visibility status of a div and toggling a class based on it

I'm facing a challenge with multiple checkboxes in a row. When a button is clicked, it displays a div (#locale_container), and flips a small arrow by adding a rotated class. However, I only want the arrow to flip when the div is being shown or hidden ...

Improved method for managing hash URLs in AJAX-enabled websites

When dealing with pages that have a hash mark in the URL address bar, it can be inconvenient unless using HTML 5 and history.pushState() for AJAX loads. For example, when item1.html is loaded and then the user clicks to view item2.html, the URL changes to ...

The Jquery Datatable fails to display the accurate number of rows based on the selections made in the dropdown

I am working on an ajax call that returns a table. In the success method, I am using $("#tableID").dataTable();. Although it shows paging and the number of rows in the dropdown, it is displaying all rows instead of only the number of rows selected in the d ...

Switch up row values in an array and transform them into an object using SheetJS

I am struggling to format an array where each "Working Day" is represented as an object with specific details like index and start/end date. I need help manipulating the JSON data to achieve the desired structure. The package I'm currently using is: ...

jQuery effects failing to run properly in Internet Explorer

<script type="text/javascript" src="css/jquery-1.7.1.js"></script> <script type="text/javascript"> function slidedown(id){ $('#rerooftext').hide(0); $('#inspectiontext').hide(0); $('#remodelingtext').hid ...

Disabling the background shadow effect in Angular Material's Accordion

I successfully disabled the background shadow on the Angular Material Accordion in this demonstration by incorporating the following CSS rule: .mat-expansion-panel:not([class*='mat-elevation-z']) { box-shadow: none !important; /* box-shadow: ...

"Trouble encountered while trying to display Angular in an HTML document

In my Angular project, there is a feature where a list of orders is displayed in one view. Each order is represented by its title only. When the user clicks on the title, they should be redirected to a new view showing the complete content of that particul ...

Directive in AngularJS fails to trigger upon form reset

I encountered an issue with a directive used within a form, specifically when clicking on a button with the type reset. The problem can be replicated on this stackblitz link. The directive I'm using is quite simple - it sets the input in an error stat ...

Creating a Mocha+Chai test that anticipates an exception being thrown by setTimeout

Here is what I have: it('invalid use', () => { Matcher(1).case(1, () => {}); }); I am trying to ensure that the case method throws an exception after a delay. How can I specify this for Mocha/Chai so that the test passes only if an exce ...

Troubleshooting Problem with Inputting Text in Field Using Python Selenium

Recently, I started exploring the capabilities of Python's Selenium module and encountered an issue while attempting to automate the checkout process on this website: . Everything was working smoothly until it reached the city field. It seems like the ...

Is it possible to utilize a route path in a JavaScript AJAX request?

So I have a situation with an ajax call that is currently functioning in a .js file, utilizing: ... update: function(){ $.ajax({ url: '/groups/order_links', ... However, my preference would be to use the route path instead. To achieve ...