we have a requirement to test our web application through test automation using Selenium Webdriver
Validate web application is loaded completely or not
validate content is rendered or displayed without issues
Headless mode
My doubt is can we certify that web application is loaded and content rendered without issues?
in headed mode ? yes , but headless mode it browser will invoke without head
Can someone help me to understand and is it right way to do test automation?
currently I have implemented in head mode and certifying to achieve as expected
now the requirement is headless on CI .
Expectation: Is it right approach headless mode to test content render and web application loading?
Headless Browser
A Headless Browser is just like a regular web browser except that it doesn't have a a visible UI shell, so no tabs, URL bar, input fields, buttons, etc. It's just the website and nothing else as there’s no GUI to navigate. A Headless Browser can be controled through an automated script or manually through a command-line interface and you can still validate rendered contents without any issues.
tl; dr
Getting Started with Headless Chrome
Related
Hi I could do with some help / more experienced eyes.
I have a WPF application which I have started automating some UI tests for using winappdriver, upon further investigation it has embeded html in it - webview, and can fire off requests to open the default browser with app related content - such as help files.
Has anyone had experience in working with this? For example:
open the WPF app,
click on help button on the WPF app which will open a browser and
then continue the test to ensure that the correct help page has been launched with the correct content in relation to the WPF page it was fired from.
Presumably this can be done in my case with chrome driver (winappdriver cannot see the content on the webpage). I have tried using selenium's window handles, but it's like the driver can't see the already open browser page. So I am at a bit of a loss and really not sure what to do.
In previous roles I was used to using Ranorex, which does both windows and web based UI automation. So I have never had any experience using multiple driver types to do the one test.
I have reactjs application with express server. I want to have my application as SEO friendly. I am using react-helmet to add SEO meta tags. How can I check SEO meta tags in dev mode?
You can launch an Ngrok session on your dev server port.
ngrok http 3000
Ngrok will give you an URL and you'll have to put this URL in https://metatags.io
If you are using react client side rendering. You should be able to see them in chrome dev tool.
(If you don't know how to open dev tool in chrome browser then just right click anywhere in the page and click inspect elements and go to elements panel.)
Remember react client side rendering will execute only when your bundle is fully downloaded on users browser.
Google now executes javascript too when indexing pages. If all that matters to you is google search engine then you are good.
you can go to google search console to debug how google sees your site if its deployed out there for public to access
But if you want to be sure that your web pages are understood by all search engines like bing,duckduckgo,baidu (which may or may not execute javascript) then you either need to do prerendering of all pages using some sort of tool like react-static / prerender or start rendering your webpages on server side and serve the html directly.
find all meta details below mentioned ways
using view source
in browser inspect element
https://checkseo.io
I've a simple web server for e2e purposes, built with create react app and react app rewired.
Cypress runs perfectly against this web server, the only issue I am facing is about the fonts.
They are included with an external url.
Since I launch the web server regularly, the react application is able to be fed with the url for the proper fonts.
Once Cypress open the browser with the command cypress open the console log shows this error and fonts indeed are not loaded.
GET https://[URL.EXTENSION]/[FONT.WOFF2] net::ERR_EMPTY_RESPONSE
BEGIN EDIT
I noticed that the issue occurs on my company VPN and not on my regular network configuration, so as I already said, the fonts are not loaded just in the browser of Cypress, if I
view the website from a regular browser
access those fonts url copying them in the browser
any issue is occurring
END EDIT
Where is lying the error? Do I miss something in the configuration?
Thanks
I'm building a web app with Stripe checkout. On desktop it loads a nice modal when you go to pay, but on mobile it brings the users off to a Stripe page, and then back. I want it to look like the user is never leaving our site.
Is there a way to force the modal to be loaded on mobile? I'm building the web app in ionic at the same time, so if I want to turn it in to an app I can. Ionic uses a WebView on the phone and that loads the modal fine, so there must be some setting that is allowing it?
Anyone have any ideas? Thanks.
edit If I 'request desktop site' on my mobile it loads the modal fine
As Stripe makes these determinations based on the User-Agent you could try changing the User-Agent of your webview to match that of a desktop browser, (I did a similar thing except I needed to force mobile behavior in the desktop).
It should be stated, that this is definitely not recommended by Stripe nor supported and could break at any time. They'd recommend you just build a custom form using Stripe.js
How i can set User Agent in Cordova App has how to set the User-Agent in iOS and Android.
Background:
I've built a Angular Application that works fine on browsers.
On the frontend side I have HTML/CSS/Angular/Bootstrap, backend side is Web API. So it is completely separated.
I took my front code zipped it, used Phonegap to build android app. When I run it I can see the first screen of my web site. I've confirmed that the angular code there works, cause I can see it filtered navigation based on the fact the user is not logged in.
But when I try to go to any other page of my app I get an empty screen, so I tried to remotely debug it using PG remote debugger. Every time I try to load anything but my homepage I loose connection to my target. I haven't seen any JS errors in console.
This is the only thing in the logs:
"exception firing pause event from native"
"exception firing resume event from native"
Is there some part of configuration that I missed that could cause this behavior, or is there another way I can debug this?
Since you are using angularJS, I'm guessing you are using a webserver locally to make the app run on your browser, so everything seem to work fine
Although PhoneGap uses a file server to run your app on WebView, which is similar to just opening the index.html on browser without webserver. Bottom line is if you can make your app work on desktop browser by just opening your index.html without webserver then it will work when u build as PhoneGap app.
You might run into Cross-Origin issues when testing your app on browser, this will happen if your app is making REST API calls or if you are loading angularJS templates from another .html file, these Cross-Origin restrictions are taken care in PhoneGap build. So when testing on local browser you might want to open Chrome with web security disabled.
If you have developed your app using a webserver to test, then you might have absolute URLs for loading assets or hrefs, you will have to change these to relative URL paths.
For example, change <a href="/#/next-page"> to <a href="#/next-page">, or <img src="/images/logo.png"> to <img src="images/logo.png">