Problem: when I use a visual regression testing tool such as PhantomCSS, the screenshots produced contain the website with dramatically moved HTML elements.
Problem image:
How it should really look like: (taken from esfiddle.net )
Tools: PhantomCSS. The same problem happens with BackstopJS.
What can I do to prevent the problem image?
The flex CSS property is causing the problems.
Since version 3 backstop supports chrome as engine, so you could specify
"engine": "chrome"
I think it would work fine in Chrome.
Related
I upgraded from Testcafe 1.6.0 to 2.0.1.
I noticed there are differences in how TestCafe takes screenshots.
This is a screenshot from 1.6.0:
This is a screenshot taken with 2.0.1:
This is how it actually looks:
As you can see in 1.6.0 and in the original the "Q" looks more like an "O" because it is cropped - like other letters. overflow: hidden is set on the element.
It makes sense. This is the actual box of the screenshottet element:
The actual text is in a div element inside the screenshottet element:
It seems like in 2.0.1 it disables overflow: hidden on the screenshottet element to take the screenshot.
Is there a way to re-enable the old behaviour?
TestCafe published a new version - 2.1.0-rc.1 with a fix for the issue with screenshosts. Please update testcafe and check the issue again. If it doesn't help, create a simple sample with the following template: https://github.com/DevExpress/testcafe/issues/new?assignees=&labels=TYPE%3A+bug&template=bug_report.yaml
I have been using cytoscape.js library to develop an application, but the extension layout cose-bilkent is working fine in google chrome, but the same code gives an error in Internet Explorer.
I am getting SCRIPT5009: 'Set' is undefined error in th IE debugger. Please advise what I might be missing.
Image with error in cose-bilkent.js file
This is a very common mistake (not yours, its the ie that is broken). IE doesn't support either Map or Set (expect for their "basic support"). You can see that here.
import 'core-js/es6/map';
import 'core-js/es6/set';
If you want to use it, there may be some workarounds with requireJS or polyfill, but using edge or ANY other browser than good ol' IE would do the trick...
I am working on an application build on Dojo 1.4 and currently used on IE8.
When tried to run IE10 Compatibility view, I observer some X (to clear the data) are being show in the fields like dijit.form.Select. While in IE8 it doesn't display them
Please guide to remove them or what basically is happening
Thanks in Advance
If this is the same problem I just fixed then the question isn't referring to the IE10 "clear field" X. It's referring to a very large text "X" character that is displayed in the Select widget in addition to the options that are supposed to be there, making the widget twice as tall as it should be.
In my case it was because I was mixing the CSS stylesheet from one Dojo version with the API's from another. Check to make sure that your stylesheet and dojo.js versions match. For example, in my case the stylesheet was:
...href="//ajax.googleapis.com/ajax/libs/dojo/1.7.5/dijit/themes/claro/claro.css" media="screen">
while the script being included was
... src="//ajax.googleapis.com/ajax/libs/dojo/1.10.1/dojo/dojo.js"></script>
I blame the fact that I was modifying Dijit sample code without knowing what the heck I was doing...
OK, so I use Respond.js a polyfill for mediaqueries on legacy browsers (ie8 being the most important).
At the same time I'm investigating in using Enquire.js which enables executing js-code based on media-query matches.
Tested in isolation this stuff works:
respond.js executes media-queries defined in css correctly for IE8
enquire.js executes javascript code correctly based on media-queries matching css. (for NON-legacy browsers)
However the combi doesn't seem to work. I.e:
Enquire.js doesn't execute javascript based on a media-query which gets enabled through respond.js (for legacy browsers)
Since Respond.js contains Paul Irish's polyfill for MatchMedia which (as per: Enquire's documentation) should be enough for legacy support, I'm not sure what could be wrong.
So just to be checking: this combination should work right?
I'm the author of enquire, so i'll help where i can.
I've just browsed through the respond.js source to find out how it works. Respond extracts any media queries from your CSS, then depending on the width of the window it will create new style blocks containing that CSS if the media query matches (this is why it only supports simple media queries such as max/min-width). This of course means that it will not help enquire JS, as it is simulating media queries.
The inclusion of the matchMedia polyfill is actually a red herring. All that does is create an equivalent to the matchMedia browser API. Thus if the browser only supports very limited set of media queries (as IE8 does), it will not expand it's capabilities, it will only allow you to work within it's means. I made this mistake myself at first!
I don't know if this will help you, but enquire's register method can accept a third parameter, shouldDegrade which is a signal to enquire that you intend the functionality to always run if the browser is deemed incapable. Thus if you pass in true, the match function will always be executed for incapable desktop browsers (whilst still being conditional for capable browsers). This will allow you to deliver a desktop experience to older browsers, especially useful in mobile-first approaches.
Happy to help further if you have any more questions
Try removing the inclusion of matchMedia from respond.js, and then loading match.media and enquire.js after respond.js. Worked for me in IE 7 and 8 with enquire v 2.0.2.
I found a solution that seems to work for IE8
1.Very important ! Remove match.media from respond JS if you use it (if not it will silently fail in IE)
2.Include Modernizr with at least mediaqueries testing, load, shiv : http://modernizr.com/download/#-shiv-mq-cssclasses-teststyles-load
3.In < head > (because we need respondjs in head)
<script src="../../common/vendor/modernizr/modernizr.custom.js"></script>
<script>
Modernizr.load([
// Test need for CSS media query polyfill
{
test: Modernizr.mq("only all"),
nope: "../../common/vendor/respond/respond.min.js"
}
]);
</script>
4.Before < /body > tag to load polyfill and your scripts
<script>
Modernizr.load([
{
test: window.matchMedia,
nope: [
"../../common/vendor/polyfills/media.match.js",
"../../common/vendor/polyfills/matchMedia.addListener.js"
]
},
'../../common/vendor/enquire/enquire.min.js',
'../../common/scripts/script.js'
]);
</script>
I hope it will work for you !
We're using JBehave Web to drive our selenium test suite for a new project and really like the Etsy.com example available on JBehave, especially the Java/Spring maven archetype as this fits in with our architecture.
The biggest problem so far has been documentation, which is why I'm posting here in the hopes that I can get some help from others in a similar situation.
It looks like JBehave Web only provides a "FirefoxWebDriverProvider" class and no corresponding one for Chrome. Has anyone else run into this problem? Have you written your own ChromeDriverProvider?
Also, we need to change the size of the browser that comes up by default and I can't seem to find a way of doing that during the bootstrapping of the test run.
We're using the Maven archetype: jbehave-web-selenium-java-spring-archetype which uses the jbehave-maven-plugin and the "run-stories-with-annotated-embedder" goal so we're using the "Annotated" method of extending the InjectableEmbedder.
If anyone can provide some guidance, I'd really appreciate it, even if just pointers to more examples.
How To Resize Window
webDriverProvider.get().manage().window().setSize(new Dimension(width, height));
You can easily find code like this by navigating through the code. If you are using Eclipse, Open Declaration and Quick Type Hierarchy options are everything you need.
How to Use Chrome Driver
You can use TypeWebDriverProvider or PropertyWebDriverProvider. For instance:
new TypeWebDriverProvider(ChromeDriver.class);
This should work:
driver.manage().window().setSize(new Dimension(800, 621));
What jokka said is correct, justr a side note: Before resizing window, I always put it to top left corner, so I know that WebDriver can "see" everything:
driver.get().manage().window().setPosition(new Point(0, 0));
Obviously, the driver above is assumed healthy instance of WebDriverProvider
We ended up finding this Chrome Driver and it's been working great. It can take a parameter when it is bootstrapped to start in maximized mode and also exposes the capability to add extensions when it starts up.
driver.Manage().Window.Size = new Size(x, y);
This works fine for me. The x and y are in a feature file.
Try this:
This is working fine for me.
Capybara.current_session.driver.browser.manage.window.resize_to(1800, 1000)