Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Chromy breaking when an element has position absolute css property #101

Open
andrepm06 opened this issue Feb 6, 2018 · 4 comments
Open

Comments

@andrepm06
Copy link

When a page under test has an element with position absolute property, and this element has no relative parent, BackstopJS or Chromy (i dont know) breaks.

Here`s the output:

ChromyJS returned an unexpected error while attempting to capture a selector. TypeError: Cannot read property 'length' of null at Chromy._screenshotMultipleSelectors$ (/usr/local/lib/node_modules/backstopjs/node_modules/chromy/dist/index.js:1388:27) at tryCatch (/usr/local/lib/node_modules/backstopjs/node_modules/babel-runtime/node_modules/regenerator-runtime/runtime.js:62:40) at Generator.invoke [as _invoke] (/usr/local/lib/node_modules/backstopjs/node_modules/babel-runtime/node_modules/regenerator-runtime/runtime.js:296:22) at Generator.prototype.(anonymous function) [as next] (/usr/local/lib/node_modules/backstopjs/node_modules/babel-runtime/node_modules/regenerator-runtime/runtime.js:114:21) at tryCatch (/usr/local/lib/node_modules/backstopjs/node_modules/babel-runtime/node_modules/regenerator-runtime/runtime.js:62:40) at invoke (/usr/local/lib/node_modules/backstopjs/node_modules/babel-runtime/node_modules/regenerator-runtime/runtime.js:152:20) at /usr/local/lib/node_modules/backstopjs/node_modules/babel-runtime/node_modules/regenerator-runtime/runtime.js:162:13

@dotneet
Copy link
Contributor

dotneet commented Feb 7, 2018

thank you for reporting.
could you attach a minimal reproduction code?

@andrepm06
Copy link
Author

To contextualize:

I`m testing visual regression (with BackstopJS) against an application that uses react with style components

Here's the code for the issued component:

export const Wrapper = styled.div`
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;`

Our paliative solution was to put a position relative on the body.

Also, if I remove the position absolute from the style, the test works fine.

@mstruensee
Copy link

I am experiencing the same issue ... #113

@kevinmpowell
Copy link

I'm using chromy in backstopjs as well and can confirm that adding:

body {
  position: relative;
}

To the page I was testing made these errors go away. Thanks @andrepm06 for the tip!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants