I am automating a web page using Selenium Webdriver and Java ,am hit with the Polymer Web page which has shadowRoot elements in the Html. I am not able to reach the elements required.
I need to access the element with id="Contain" and id="callButton", I have tried to use the examples in the web which gave me an idea to access but i am not able to reach to the element. Can i get this automated with selenium is what i need to understand.
When i try to get the page source dynamically while automating elements below the shadow-root are not accessible.
The above snapshot is while i inspect the element. Dynamically if i take the page source i get the below html. In this i dont get any element after the first shadow-root
' <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Cache-Control" content="no-store">
<meta name="description" content="">
<meta name="viewport" content="width=device-width,initial-
scale=1,minimum-scale=0.5,maximum-scale=3,user-scalable=yes">
<base href="/">
<title>Title</title>
<!--logo Favicon - http://www.favicon-generator.org/-->
<link rel="shortcut icon" type="image/x-icon"
href="./assets/img/favicon/favicon.ico">
<link rel="apple-touch-icon" sizes="57x57"
href="./assets/img/favicon/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60"
href="./assets/img/favicon/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72"
href="./assets/img/favicon/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76"
href="./assets/img/favicon/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114"
href="./assets/img/favicon/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120"
href="./assets/img/favicon/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144"
href="./assets/img/favicon/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152"
href="./assets/img/favicon/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180"
href="./assets/img/favicon/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"
href="./assets/img/favicon/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32"
href="./assets/img/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96"
href="./assets/img/favicon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16"
href="./assets/img/favicon/favicon-16x16.png">
<link rel="manifest" href="./assets/img/favicon/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage"
content="./assets/img/favicon/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<!--End of Favicon section--><!-- Web Fonts -->
<link href="https://fonts.googleapis.com/css?
family=Roboto&subset=latin,latin-ext" rel="stylesheet"
type="text/css">
<link href="styles.6818abb062a6ae399f29.bundle.css"
rel="stylesheet"/>
</head>
<body>
<app-login>
<!--Inline style for loading screen--><style>body, html {
height: 100%;
background: #FAFAFA;
}
#keyframes spinner {
to {transform: rotate(360deg);}
}
.spinner:before {
content: '';
box-sizing: border-box;
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
margin-top: -50px;
margin-left: -50px;
border-radius: 50%;
border: 1px solid #CDCDCD;
border-top-color: #0277BD;
animation: spinner .6s linear infinite;
}
.app-loading {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
}
</style>
<div class="app-loading">
<div class="spinner">
</div>
</div>
</app-login>
<script type="text/javascript"
src="inline.318b50c57b4eba3d437b.bundle.js"></script>
<script type="text/javascript"
src="polyfills.9a4f082a49343f8da8e1.bundle.js"></script>
<script type="text/javascript"
src="scripts.ccb2e44daa4fd4db3422.bundle.js"></script>
<script type="text/javascript"
src="main.aacb992b6c008772ed3d.bundle.js"></script>
</body>
</html>`
I have used a combination of Java script and XPaths to get the :
First element before the shadow-root by tagname
// Here i am using the getElementsByTagname to get tag which gets all the elements under the tag which is just before the second shadow-root.
' WebElement ironPages = (WebElement) jse.executeScript("return
arguments[0].shadowRoot.getElementsByTagName('iron-pages')[0]",
edgeCallControl); '
once i get the above , i am able to access every element by "id" of each of the element as per the HTml
Get the button button , where the Button is the ID.
` WebElement button = (WebElement) jse.executeScript("return
arguments[0].shadowRoot.querySelector('#Button')",
edgeManualDial);'
this ideas i got from the "Shadow-dom support for selenium"
Related
I try to test functionality of getUserConfirmation. Code is following:
getUserConfirmation={(message, callback) => {
const container = document.createElement('div');
// callback(false);
document.body.append(container);
ReactDOM.render(
<div
style={{
width: '400px',
height: '400px',
backgroundColor: 'black',
zIndex: 1000,
}}
/>,
container,
console.log('Here'),
);
}}
>
Code reacts to my attempt to change url and callback (console.log('here')) works. But nothing appears in browser. What I do wrongly?
It works in this example:
const getUserConfirmation = (message, callback) => {
const container = document.createElement("div");
// callback(false);
document.body.append(container);
ReactDOM.render(
<div
style={{
width: "400px",
height: "400px",
backgroundColor: "black",
zIndex: 1000
}}
/>,
container,
console.log("Here")
);
};
getUserConfirmation();
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
</body>
</html>
However, what's the purpose of this?
Why not have a single and fixed "root div" in the html and pass this element to ReactDOM.render?
I added position: 'absolute' and now I can see my div. Before I it 'hided' under scripts tags. Lol
I can't see my meta tags on my source code.
I see my tags only when I inspect my page on Elements . Is it enough to show meta tags in elements to correctly register my page on search engines?
I'm using React Helmet without a server.
Home page:
import {Helmet} from 'react-helmet';
export default class Home extends Component {
render() {
return (
<div>
<Helmet>
<meta charSet="utf-8" />
<title>Home</title>
<link rel="canonical" href="https://somedomain.com/" />
<meta name="description" content="Description here ......." />
</Helmet>
......
My index.html file:
<!DOCTYPE html>
<html lang="en">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
<head>
</head>
<body>
<div id="root"></div>
</body>
</html>
Output inspect Elements:
<title>Home</title>
<link rel="canonical" href="https://somedomain.com/" data-react-helmet="true">
<meta charset="utf-8" data-react-helmet="true">
<meta name="description" content="Description here ......" data-react-helmet="true">
Output Source code:
<!doctype html><html lang="en"><link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="manifest" href="/site.webmanifest"><link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5"><head><link href="/static/css/2.69121389.chunk.css" rel="stylesheet"><link href="/static/css/main.8a7e4572.chunk.css" rel="stylesheet"></head><body><div id="root"></div><script>!function(e){function t(t){for(var n,i,l=t[0],f=t[1],a=t[2],c=0,s=[];c<l.length;c++)i=l[c],Object.prototype.hasOwnProperty.call(o,i)&&o[i]&&s.push(o[i][0]),o[i]=0;for(n in f)Object.prototype.hasOwnProperty.call(f,n)&&(e[n]=f[n]);for(p&&p(t);s.length;)s.shift()();return u.push.apply(u,a||[]),r()}function r(){for(var e,t=0;t<u.length;t++){for(var r=u[t],n=!0,l=1;l<r.length;l++){var f=r[l];0!==o[f]&&(n=!1)}n&&(u.splice(t--,1),e=i(i.s=r[0]))}return e}var n={},o={1:0},u=[];function i(t){if(n[t])return n[t].exports;var r=n[t]={i:t,l:!1,exports:{}};return e[t].call(r.exports,r,r.exports,i),r.l=!0,r.exports}i.m=e,i.c=n,i.d=function(e,t,r){i.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},i.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},i.t=function(e,t){if(1&t&&(e=i(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(i.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var n in e)i.d(r,n,function(t){return e[t]}.bind(null,n));return r},i.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return i.d(t,"a",t),t},i.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},i.p="/";var l=this["webpackJsonpmy-website"]=this["webpackJsonpmy-website"]||[],f=l.push.bind(l);l.push=t,l=l.slice();for(var a=0;a<l.length;a++)t(l[a]);var p=f;r()}([])</script><script src="/static/js/2.c77f8540.chunk.js"></script><script src="/static/js/main.69bc3bde.chunk.js"></script></body></html>
I am working on a React project. I want my CSS to be embedded into HTML itself without having a network call for CSS.
CSS
body{
background-color: #000000;
}
into one file like
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
<style>
body{
background-color: #000000;
}
</style>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
I have no knowledge of webpack
I have setup customize-cra and have config-override.js file.
module.exports = function override(config, env) {
// do stuff with the webpack config...
return config;
};
May be this is what you need "react-style-tag"
From your post I think you want to have your styles inside the of your index.html file
I am new in web developing and I just finish my first website: www.aviakassir.az
But I face the problem when try to open my website on mobile device. Some part of my header not diplayed at all (contact and languages line on top). Menu is splitted into two parts and search script located down the image.
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="description" content="Onlayn biletlerin alisi, hotel rezervasiya, aviakassir">
<meta name="keywords" content="onlayn aviabilet, aviabilet, turizm, seyahet, aviakassir">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aviakassir</title>
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700" rel="stylesheet">
<link rel="shortcut icon" type="image/x-icon" href="images/favicon.ico">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/hover-min.css">
<link rel="stylesheet" href="css/jquery-ui.min.css">
<link rel="stylesheet" href="css/meanmenu.min.css">
<link rel="stylesheet" href="css/owl.carousel.min.css">
<link rel="stylesheet" href="css/slick.css">
<link rel="stylesheet" href="css/chosen.min.css">
<link rel="stylesheet" href="css/jquery-customselect.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" href="css/magnific-popup.css">
<link rel="stylesheet" href="css/assets/revolution/layers.css">
<link rel="stylesheet" href="css/assets/revolution/navigation.css">
<link rel="stylesheet" href="css/assets/revolution/settings.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/responsive.css">
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
</head>
What I missed here? Here how my page looks in mobile Chrome:
Check your responsive.css Web pages can be viewed using many different devices: desktops, tablets, and phones. Your web page should look good, and be easy to use, regardless of the device. Web pages should not leave out information to fit smaller devices, but rather adapt its content to fit any device It is called responsive web design when you use CSS and HTML to resize, hide, shrink, enlarge, or move the content to make it look good on any screen
#media only screen and (max-width: 767px)
.header-top-left {
display: none;
}
set display: block;
I would like to add some animations to my angularjs applications, and surfing on dribble I found this example:
Can someone point me to the right direction for achieving this effect ? Are there some libs doing the work or is it entirely artisanal ?
Notice the 2 animations, the one from the front yellow button expanding to the full area, and the back area sliding/fading away
I am giving you an example, you can change the effects to meet your needs!
var app = angular.module('myApp', ['ngAnimate', 'fmp-card']);
app.controller('MainCtrl', function($scope) {
$scope.leftBackText = 'Here you can insert anything you want, may be a page!';
$scope.rightBackText = "http://sstatic.net/stackexchange/img/logos/so/so-icon.png?v=41f6e13ade69";
});
.my-card{
display: inline-block;
}
.back-text{
padding-top: 60px;
padding-left: 10px;
padding-right: 10px;
}
#container{
width: 100%;
}
#card-1{
float: left;
}
#card-2{
float: left;
}
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>AngularJS Flip Card</title>
<link href="style.css" rel="stylesheet" />
<link href="https://rawgit.com/souly1/angular-flip-card/master/css/fmpCardDirective.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.6/angular.min.js" data-semver="1.3.6"></script>
<script data-require="angular-animate#*" data-semver="1.3.6" src="https://code.angularjs.org/1.3.6/angular-animate.min.js"></script>
<script src="https://rawgit.com/souly1/angular-flip-card/master/fmpCardDirective.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div id="container">
<fmp-card class="my-card" id="card-1" suffix="left" image="http://sstatic.net/stackexchange/img/logos/so/so-icon.png?v=41f6e13ade69" front-caption="Left Card" small-card-width="200px" small-card-height="200px">
<div class="back-text"><img src={{rightBackText}} /></div>
</fmp-card>
<fmp-card class="my-card" id="card-2" suffix="right" image="http://sstatic.net/stackexchange/img/logos/so/so-icon.png?v=41f6e13ade69" front-caption="Right Card" small-card-width="200px" small-card-height="200px">
<div class="back-text">{{leftBackText}}</div>
</fmp-card>
</div>
</body>
</html>