garris / garris/BackstopJS

Error capturing Element

Open
#991 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
7.2k
Forks
621
PR merge metrics
No merged PRs in 30d

Description

Hi, thx for your awesome tool.

I have tried to integrate your tool into an existing project.
both the document and viewport selectors works correctly.

but i get a bug when i use a class selector in addition.
here i have bound this class (.data-testui) to the header and the footer for testing purposes.

**Issue:**
1. **backstop reference issue**
if i now execute a ```backstop reference``` i get the following error:
```
Error capturing Element .data-testui Error: Node has 0 height.
at assert (/opt/node/lib/node_modules/backstopjs/node_modules/puppeteer/lib/helper.js:229:11)
at ElementHandle.screenshot (/opt/node/lib/node_modules/backstopjs/node_modules/puppeteer/lib/JSHandle.js:355:5)
at
at process._tickCallback (internal/process/next_tick.js:188:7)
-- ASYNC --
at ElementHandle. (/opt/node/lib/node_modules/backstopjs/node_modules/puppeteer/lib/helper.js:108:27)
at selectorShot (/opt/node/lib/node_modules/backstopjs/core/util/runPuppet.js:367:22)
at
at process._tickCallback (internal/process/next_tick.js:188:7)

```
2. **backstop test issue**
if i run the ```backstop test``` command, i get the follogin error:

```
Error capturing Element .data-testui-1 Error: Node has 0 height.
at assert (/opt/node/lib/node_modules/backstopjs/node_modules/puppeteer/lib/helper.js:229:11)
at ElementHandle.screenshot (/opt/node/lib/node_modules/backstopjs/node_modules/puppeteer/lib/JSHandle.js:355:5)
at
at process._tickCallback (internal/process/next_tick.js:188:7)
-- ASYNC --
at ElementHandle. (/opt/node/lib/node_modules/backstopjs/node_modules/puppeteer/lib/helper.js:108:27)
at selectorShot (/opt/node/lib/node_modules/backstopjs/core/util/runPuppet.js:367:22)
at
at process._tickCallback (internal/process/next_tick.js:188:7)
x Close Browser
COMMAND | Executing core for "report"
compare | Reference image not found testing_ui_newproject_-_Testing_UI_2_data-testui-1_0_desktop.png
compare | OK: newproject - Testing UI testing_ui_newproject_-_Testing_UI_0_document_0_desktop.png
compare | OK: newproject - Testing UI testing_ui_newproject_-_Testing_UI_1_viewport_0_desktop.png
compare | OK: newproject - Testing UI testing_ui_newproject_-_Testing_UI_3_data-testui-2_0_desktop.png
compare | OK: newproject - Testing UI testing_ui_newproject_-_Testing_UI_4_data-testui-3_0_desktop.png
report | Test completed...
report | 4 Passed
report | 1 Failed
report | Writing jUnit Report
report | jUnit report written to: test_ui/report/ci/xunit.xml
report | Writing browser report
report | Resources copied
report | Copied configuration to: /home/projects/newproject_ui-testing/src/html/test_ui/report/html/config.js
COMMAND | Executing core for "openReport"
openReport | Attempting to ping
openReport | Remote not detected. Opening test_ui/report/html/index.html
report | *** Mismatch errors found ***
COMMAND | Command "report" ended with an error after [0.144s]
COMMAND | Error: Mismatch errors found.
at /opt/node/lib/node_modules/backstopjs/core/command/report.js:116:17
at
at process._tickCallback (internal/process/next_tick.js:188:7)
COMMAND | Command "test" ended with an error after [3.229s]
COMMAND | Error: Mismatch errors found.
at /opt/node/lib/node_modules/backstopjs/core/command/report.js:116:17
at
at process._tickCallback (internal/process/next_tick.js:188:7)
```

**System-Environment:**
* Linux Mint 19 Tara
* node: v8.9.4
* npm: 6.7.0
* BackstopJS: v3.8.8

**BTW:**
* its not a issue with overflow (because i removed every overflow style)
* its not hidden elements issue, because header and footer will be visible initial and dont have some js-related content
* especially crazy is that document and viewport test/reference images are mapped correctly

Contributor guide

Open the contributing guide

Research direction

Reproduce the failure with the reported BackstopJS v3.8.8 configuration using `backstop reference` and `backstop test`. Start in `core/util/runPuppet.js` at `selectorShot`, then compare the document and viewport captures with the `.data-testui` selector captures. Done means the class-selector workflow handles the reported zero-height capture consistently and the commands complete without the shown error.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
testing
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.