While attempting to test scripts using either cy.viewport('iphone-x') or cy.viewport(375,812), both render the site the same (incorrectly) but differently than if I open Chrome, go to devtools and specify the same device there. I'm relatively new to Cypress but I haven't been able to figure out why this happens or how to get Cypress to render the website correctly.
Using Devtools
Using Cypress
So it looks like this might actually be a code issue within the app. Using devtools, if I inspect the white space it shows height:auto. De-selecting this within devtools makes the screen look like it does when viewing it in Cypress using a mobile viewport. I've logged a bug with my app's development team.
Related
This seems to be by design as far as I can tell. Selenium can see the initially loaded HTML, but not the HTML after it's been massaged. I've tried IE, Chrome and PhantomJS and they all show the same behavior. So does the built-in Chrome debugger, until you inspect an element on the page, you can't query any of the rendered HTML.
I'm looking for any suggestions about how to scrape the web page. The only option I see right now is finding the chrome process, triggering the inspector, clicking inside, then running the Javascript. Needless to say, this sounds fragile.
I also haven't been able to find anything on capturing the Ajax calls from selenium so I can make them and capture the JSON. When tried copy / paste from the chrome network tab into selenium I got a missing application block message.
Does anyone have any other advice?
Since I can replicate the issue in the chrome debugger, I don't see posting code as useful. It looks like a design decision.
Ralph
Sadly, I wasn't able to do things in a straightforward way. Instead, I used Selenium to do the login and navigate to the page, then use windows API calls to click inside the window send ^a^c to copy the data and an absolute location to click on the button to go to the next page.
The site is set up so that ^a^c copies the raw data for this site. I don't know if that's standard for Angular or not.
Fragile, but it works.
I only need screenshots of the current viewport, particularly respecting the scroll position. Basically what the current Chrome driver does.
From what I've read it seems this should be entirely possible, but for some reason the screenshot commands always strive to take a full document screenshot. In fact the IE driver takes multiple viewport shots and then stitches them together.
I'm using the Ruby webdriver, and I can't see anyway to take a screenshot of just the viewport. Is it possible?
There are two competing definitions of "screenshot" when dealing with WebDriver. The first is the definition used by the open-source project, where a screenshot is defined to be an image of the entire DOM of the loaded page. In this case, both the IE driver and the Firefox driver are doing the correct thing as defined by the project since 2010. The Chrome implementation of WebDriver is incorrect in returning an image of only the visible view port.
The W3C WebDriver specification, on the other hand, defines screenshots to be of the current view port only. This is at odds with the current open-source project's driver implementations (IE and Firefox), and can be expected to change in the future. Once the specification has attained "Candidate Recommendation" status, those drivers are likely to be updated.
As an aside, it should be noted that the IE driver in no way uses a "scroll-and-stitch" method to create its screenshots. It does resize the browser window large enough to display the entire DOM, as calculated at the moment the screenshot is requested, and take an image of that. However, please note that there are issues with IE 10 and 11 in producing these full-DOM screenshots depending on the bit-ness of your operating system and of the IEDriverServer executable you're using.
At present, you'll need to use a tool external to WebDriver to obtain view-port-only screenshots for IE and Firefox.
This is a frequently changing issue..
AFAIK right now Chrome- and IEDriver both capture screenshots of the viewport only, while FFDriver captures a full-page screenshot (FF will change this in the future). See also my answer to this question.
I would like to make screenshots of the receiver application running of the Chromecast device.
I need to have it running on the device to show the video and the application together.
Is there a way to do this ?
Ali Naddaf's answer is technically true, however with a little work I was able to make a faithful reconstruction of the screen, to the point that it is indistinguishable from an actual screenshot.
We will use code from the html2canvas project, see http://html2canvas.hertzen.com/documentation.html . It will render our screen to a canvas. In particular, copy&paste the compiled code from http://html2canvas.hertzen.com/build/html2canvas.js to the Chromecast console. (adding a tag to dom seems not to work) You can access the Chromecast console & developer tools by accessing the ip.ad.dr.ss:9222 port via Chrome.
Issue the following command:
html2canvas(document.body, {onrendered: function(canvas){document.write('');}});
This will destructively replace the screen with the screenshot (I find this convenient but you can easily think of a more polite way if you wish)
In the elements browser, you will have an img, with a base64 url specified as a src. Click on the url, chrome will open the image in a new tab. Hopefully it's the screenshot that you wanted.
You might find that some pictures are missing because of e.g. same origin policy. The javascript have other privileges than accessing images from html. If this happens, work it out somehow (use https for images for example), then goto 1.
You have your screenshot!
No, that is not possible due to many reasons such as media rights and security.
I'm extending zsolt-szatmari's answer into a copy-pastable script that you can use in the Chromecast Developer Tools console:
As he said, copy and paste http://html2canvas.hertzen.com/build/html2canvas.js code into the console
Call the html2canvas method: it will create a new canvas element into the DOM: html2canvas(document.body, { onrendered: function(canvas) { document.body.appendChild(canvas); } });.
Get a base64 string representation of the image currently displayed in the canvas: document.getElementsByTagName('canvas')[0].toDataURL('image/png');
You'll then get a very long base64 string: if you click on it, Chrome will show the image in a new tab. Please note that this image could be far from what is really shown on your Chromecast due to html2canvas limits:
The screenshot is based on the DOM and as such may not be 100%
accurate to the real representation as it does not make an actual
screenshot, but builds the screenshot based on the information
available on the page.
(source)
I was thinking that you could maybe use this to capture the canvas to an image file, which normally works in javascript with canvas:
var canvas = document.getElementById("mycanvas");
var img = canvas.toDataURL("image/png");
Of course then you would need to transfer this image file to somewhere - not exactly sure how to the last bit from the chromecast. Maybe that is not possible.
As a chromecast developer myself I needed screenshots of the app running to show customers. I ended up doing a kind of "simulation" of the chromecast - calling some mockup methods in javascript to display the data and then accessing my receiver app via the cast url on my desktop in the browser. Then I used a screen capture program to capture the browser output. This gave me the same screenshot as from running the receiver app on chromecast on TV, which is essentially just a browser showing your html+css+javascript receiver.
I am creating an in-house web application that I want to run in a WebKit shell browser on the Mac. I searched and came up empty. Basically, I want the site rendered and shown in a window with no chrome for navigating to other pages, bookmarks, etc. Seems to me that there should be a relatively easy way to get something like that up and running in Xcode, but alas I don't know how. The more barebones the better. Anybody know the answer?
Not sure if this is what you're looking for, but you could use a WebView. The content is rendered by Safari/WebKit.
As for chrome, if you just put the view, that's all you'll have. You can shape the rest of the User Interface however you'd like.
Apple's documentation has a couple of examples using WebView... Should this solve your problem.
Did you take a look at the phonegap mac project.
Its a full screen webkit without any chrome in which you can put your html / css / javascript to run:
https://github.com/callback/callback-mac
I'm trying to automate some tests on Internet Explorer. How can I find out if the state of the webpage being shown is changed? Is there any way to know when the page finished loading, if it changes, if it is scrolled, etc.?
I want to know how I can get this state information from another running process.
Selenium allows you to test for completion of a page load and many other events within Internet Explorer and many other web browsers. It's a tool for autmoated testing of web pages.
It allows you to write tests that perform actions and test the state of pages.
You could either look at the source for selenium and see what it's doing or just use it to do your testing.
I'm not sure how a web page would scroll by iteself in an automated test, but you could detect if the scroll Has happened by storing the window.scrollX value when the page is loaded and testing to see if the value has changed.
Basically, if you want to detect things like window scrolling in Internet explorer, you probably need your own piece of code running in the browser, like a BHO (Browser Helper Object).
There might be a way to do Event Sinking. Have a look here: http://asp.dotnetheaven.com/howto/doc/Interop/TestClient_2.aspx