How to use getElementProperty method in Webdriverio

Best JavaScript code snippet using webdriverio-monorepo

thexray.js

Source:thexray.js Github

copy

Full Screen

...603 604 whereIs=getElementOffsetLocation(theElement);605 elementTop=whereIs[1];606 elementLeft=whereIs[0];607 elementTopMargin=parseInt(getElementProperty(theElement, 'margin-top'));608 elementBottomMargin=parseInt(getElementProperty(theElement, 'margin-bottom'));609 elementTopPadding=parseInt(getElementProperty(theElement, 'padding-top'));610 elementBottomPadding=parseInt(getElementProperty(theElement, 'padding-bottom'));611 612 elementVerticalSpace=elementTopMargin+elementBottomMargin+elementTopPadding+elementBottomPadding;613 elementBottom=theElement.offsetHeight+elementTop+10;//elementVerticalSpace+5;614 elementWidth=theElement.offsetWidth;615 //make sure that the label is showing616 var labelLeft=elementLeft+(elementWidth/2)-(theLabel.offsetWidth/2);617 var labelTop=elementBottom;618 619 if (labelLeft<0) labelLeft=60;620 if (labelLeft>window.innerWidth) labelLeft=window.innerWidth-theLabel.offsetWidth-10;621 622 if (labelTop<0) labelTop=10;623// if (labelTop>window.innerHeight) labelTop=window.innerWidth-theLabel.offsetHeight-10;624 625 theLabel.style.left=labelLeft +'px';626 theLabel.style.top=labelTop+ 'px';627 628 // theLabel.style.top=+'px';629 // theLabel.style.left=+ 'px';630 theLabel.innerHTML=getElementProperty(theElement, 'width');631}632function showHeightLabel (theElement) {633 // show the heigth label for this element634 var theLabel = document.getElementById("XRAYHeightLabel");635 theLabel.style.visibility='visible';636 637 whereIs=getElementOffsetLocation(theElement);638 elementTop=whereIs[1];639 elementLeft=whereIs[0];640 elementLeftMargin=parseInt(getElementProperty(theElement, 'margin-left'));641 elementRightMargin=parseInt(getElementProperty(theElement, 'margin-right'));642 elementLeftPadding=parseInt(getElementProperty(theElement, 'padding-left'));643 elementRightPadding=parseInt(getElementProperty(theElement, 'padding-right'));644 645 elementHorizontalSpace=elementLeftMargin+elementRightMargin+elementLeftPadding+elementRightPadding;646 elementRight=theElement.offsetWidth+elementLeft+elementHorizontalSpace;647 elementHeight=theElement.offsetHeight;648 theLabel.innerHTML=getElementProperty(theElement, 'height');649 //make sure that the label is showing650 var labelLeft=elementLeft-(theLabel.offsetWidth)-10;651 var labelTop=elementTop+(elementHeight/2)-(theLabel.offsetHeight/2);652 if (labelLeft<0) labelLeft=10;653 if (labelLeft>window.innerWidth) labelLeft=window.innerWidth-theLabel.offsetWidth-10;654 655 if (labelTop<0) labelTop=10;656 //if (labelTop>window.innerHeight) labelTop=window.innerWidth-theLabel.offsetHeight-10;657 658 theLabel.style.left=labelLeft +'px';659 theLabel.style.top=labelTop+ 'px';660}661function showTopLeftLabel (theElement) {662 // show the topleft label for this element663 var theLabel = document.getElementById("XRAYTopLeftLabel");664 theLabel.style.visibility='visible';665 666 whereIs=getElementOffsetLocation(theElement);667 elementTop=whereIs[1];668 elementLeft=whereIs[0];669 elementLeftMargin=parseInt(getElementProperty(theElement, 'margin-left'));670 elementRightMargin=parseInt(getElementProperty(theElement, 'margin-right'));671 elementLeftPadding=parseInt(getElementProperty(theElement, 'padding-left'));672 elementRightPadding=parseInt(getElementProperty(theElement, 'padding-right'));673 674 elementHorizontalSpace=elementLeftMargin+elementRightMargin+elementLeftPadding+elementRightPadding;675 elementRight=theElement.offsetWidth+elementLeft+elementHorizontalSpace;676 elementHeight=theElement.offsetHeight;677 theLabel.innerHTML=elementTop + "px" + ", " + elementLeft + "px";678 //make sure that the label is showing679 var labelLeft=elementLeft-(theLabel.offsetWidth/2);680 var labelTop=elementTop-(theLabel.offsetHeight) -10;681 682 if (labelLeft<0) labelLeft=60;683 if (labelLeft>window.innerWidth) labelLeft=window.innerWidth-theLabel.offsetWidth-10;684 685 if (labelTop<0) labelTop=10;686 //if (labelTop>window.innerHeight) labelTop=window.innerWidth-theLabel.offsetHeight-10;687 688 theLabel.style.left=labelLeft +'px';689 theLabel.style.top=labelTop+ 'px';690 // theLabel.style.left= +'px';691 // theLabel.style.top=+ 'px';692}693function placeHUD(elementTop, elementLeft){694 //place the HUD relative to the element we are displaying inforrmation on695 696 var theHUD = document.getElementById("XRAYHUD");697 theHUD.style.visibility='visible';698 699 if (didDrag) return; //once dragged, don't position it700 701 // theHUD.style.position='fixed';702 setElementProperty(theHUD, 'top', elementTop);703 setElementProperty(theHUD, 'left', elementLeft);704}705function hideCanvas() {706 707 if (!supportsCanvas()) {708 hideOverlays();709 }710 else {711 var canvas = document.getElementById("WCcanvas");712 canvas.style.visibility='hidden';713 }714 715 hideLabels();716}717function hideLabels() {718 var widthLabel = document.getElementById("XRAYWidthLabel");719 widthLabel.style.visibility='hidden';720 var heightLabel = document.getElementById("XRAYHeightLabel");721 heightLabel.style.visibility='hidden';722 var topLeftLabel = document.getElementById("XRAYTopLeftLabel");723 topLeftLabel.style.visibility='hidden';724}725function hideOverlays() {726 var overlayElement = document.getElementById("WCIECanvas");727 overlayElement.style.visibility='hidden';728 var overlayElement = document.getElementById("pageOverlayTop");729 overlayElement.style.visibility='hidden';730 var overlayElement = document.getElementById("pageOverlayLeft");731 overlayElement.style.visibility='hidden';732 var overlayElement = document.getElementById("pageOverlayBottom");733 overlayElement.style.visibility='hidden';734 var overlayElement = document.getElementById("pageOverlayRight");735 overlayElement.style.visibility='hidden';736 var overlayElement = document.getElementById("marginOverlayTop");737 overlayElement.style.visibility='hidden';738 var overlayElement = document.getElementById("marginOverlayLeft");739 overlayElement.style.visibility='hidden';740 var overlayElement = document.getElementById("marginOverlayBottom");741 overlayElement.style.visibility='hidden';742 var overlayElement = document.getElementById("marginOverlayRight");743 overlayElement.style.visibility='hidden';744 var overlayElement = document.getElementById("paddingOverlayTop");745 overlayElement.style.visibility='hidden';746 var overlayElement = document.getElementById("paddingOverlayLeft");747 overlayElement.style.visibility='hidden';748 var overlayElement = document.getElementById("paddingOverlayBottom");749 overlayElement.style.visibility='hidden';750 var overlayElement = document.getElementById("paddingOverlayRight");751 overlayElement.style.visibility='hidden';752}753function showCanvas() {754 var canvas = document.getElementById("WCcanvas");755 //canvas.style.display='block';756 canvas.style.visibility='visible';757}758function hideHUD() {759 var theHUD = document.getElementById("XRAYHUD");760 theHUD.style.visibility='hidden';761}762function showHUD() {763 var theHUD = document.getElementById("XRAYHUD");764 theHUD.style.visibility='visible';765}766function inHUD(obj) {767 //is the element in the HUD element?768 769 if (obj.id=="XRAYHUD") return true;770 771// alert(obj.parentNode);772 773 if (obj.parentNode) {774 while (obj = obj.parentNode) {775 if (obj.id=="XRAYHUD") return true;776 }777 }778}779function showElementDetails(theElement){780 //show details about the element in the HUD781 782 var theHUD = document.getElementById("XRAYHUD");783 var newHUDContent784 785 //alert();786 newHUDContent= '<div class="elementInfo">';787 newHUDContent= newHUDContent+'<span class="XRAYclosebox"></span>';788 newHUDContent= newHUDContent+'<p class="XRAYtitlebar">XRAY</p>';789 newHUDContent= newHUDContent+'<p><strong>element:</strong> ' + (theElement.nodeName).toLowerCase() +'</p>';790 newHUDContent= newHUDContent+'<p><strong>id:</strong> ' + (theElement.id) +'</p>';791 newHUDContent= newHUDContent+'<p><strong>class:</strong> ' + (theElement.className) +'</p>';792 newHUDContent= newHUDContent+'</div>';793 794 795 newHUDContent= newHUDContent+'<div id="HUDHierarchy">';796 newHUDContent= newHUDContent+'<p><strong>inheritance hierarchy</strong> '+'</p>';797 newHUDContent= newHUDContent+'<p>'+ getElementHierarchy(theElement) +'</p>';798 newHUDContent= newHUDContent+'</div>';799 newHUDContent= newHUDContent+'<div class="group">';800 newHUDContent= newHUDContent+'<p><strong>position:</strong> '+ getElementProperty(theElement, 'position') +'</p>';801 802 whereIs=getElementOffsetLocation(theElement);803 elementTop=whereIs[1];804 elementLeft=whereIs[0];805 806 807 // newHUDContent= newHUDContent+'<div class="groupRow">';808 809 newHUDContent= newHUDContent+'<ul>';810 newHUDContent= newHUDContent+'<li><strong>top: </strong> ' + getElementProperty(theElement, 'top')+ ' (' + elementTop +'px)</li>';811 newHUDContent= newHUDContent+'<li><strong>left: </strong>' + getElementProperty(theElement, 'left') + ' (' + elementLeft +'px)</li>';812 newHUDContent= newHUDContent+'<li><strong>width: </strong>' + getElementProperty(theElement, 'width')+ ' (' + theElement.offsetWidth +'px)</li>';813 newHUDContent= newHUDContent+'<li><strong>height: </strong>' + getElementProperty(theElement, 'height')+ ' (' + theElement.offsetHeight +'px)</li>';814 815 newHUDContent= newHUDContent+'<li><strong>float: </strong>' + getElementProperty(theElement, 'float')+'</li>';816 newHUDContent= newHUDContent+'</ul>'; 817 newHUDContent= newHUDContent+'</div>';818 newHUDContent= newHUDContent+'<div class="group">';819 newHUDContent= newHUDContent+'<p><strong>border</strong> '+'</p>';820 newHUDContent= newHUDContent+'<ul>';821 newHUDContent= newHUDContent+'<li><strong>top:</strong> ' + getBorderWidth(theElement, 'border-top')+ 'px</li>';822 newHUDContent= newHUDContent+'<li><strong>right:</strong> ' + getBorderWidth(theElement, 'border-right')+'px</li>';823 newHUDContent= newHUDContent+'<li><strong>bottom:</strong> ' + getBorderWidth(theElement, 'border-bottom')+'px</li>';824 newHUDContent= newHUDContent+'<li><strong>left:</strong> ' + getBorderWidth(theElement, 'border-left')+'px</li>';825 newHUDContent= newHUDContent+'</ul>';826 newHUDContent= newHUDContent+'</div>';827 828 // newHUDContent= newHUDContent+'</div>'; //end group row829 830 // newHUDContent= newHUDContent+'<div class="groupRow">';831 832 newHUDContent= newHUDContent+'<div class="group">';833 newHUDContent= newHUDContent+'<p><strong>margin</strong> '+'</p>';834 835 newHUDContent= newHUDContent+'<ul>';836 newHUDContent= newHUDContent+'<li><strong>top:</strong> ' + getElementProperty(theElement, 'margin-top')+'</li>';837 newHUDContent= newHUDContent+'<li><strong>right:</strong> ' + getElementProperty(theElement, 'margin-right')+'</li>';838 newHUDContent= newHUDContent+'<li><strong>bottom:</strong> ' + getElementProperty(theElement, 'margin-bottom')+'</li>';839 newHUDContent= newHUDContent+'<li><strong>left:</strong> ' + getElementProperty(theElement, 'margin-left')+'</li>';840 841 newHUDContent= newHUDContent+'</ul>'; 842 newHUDContent= newHUDContent+'</div>';843 844 newHUDContent= newHUDContent+'<div class="group">';845 newHUDContent= newHUDContent+'<p><strong>padding</strong> '+'</p>';846 newHUDContent= newHUDContent+'<ul>';847 newHUDContent= newHUDContent+'<li><strong>top:</strong> ' + getElementProperty(theElement, 'padding-top')+'</li>';848 newHUDContent= newHUDContent+'<li><strong>right:</strong> ' + getElementProperty(theElement, 'padding-right')+'</li>';849 newHUDContent= newHUDContent+'<li><strong>bottom:</strong> ' + getElementProperty(theElement, 'padding-bottom')+'</li>';850 newHUDContent= newHUDContent+'<li><strong>left:</strong> ' + getElementProperty(theElement, 'padding-left')+'</li>';851 newHUDContent= newHUDContent+'</ul>';852 newHUDContent= newHUDContent+'</div>';853 // newHUDContent= newHUDContent+'</div>'; //end group row854 newHUDContent= newHUDContent +'<div id="XRAYabout">';855 newHUDContent= newHUDContent+'<p><a href="http://westciv.com/xray/" class=' +'"XRAYdetailedLink"'+' onmousedown=' +"return true" +'>about XRAY (v 0.91a)</a></p>';856 newHUDContent= newHUDContent+'</div>';857 theHUD.innerHTML=newHUDContent;858 859}860function getClientSize() {861 //http://www.howtocreate.co.uk/tutorials/javascript/browserwindow862 var myWidth = 0, myHeight = 0;863 if( typeof( window.innerWidth ) == 'number' ) {864 //Non-IE865 myWidth = window.innerWidth;866 myHeight = window.innerHeight;867 } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {868 //IE 6+ in 'standards compliant mode'869 myWidth = document.documentElement.clientWidth;870 myHeight = document.documentElement.clientHeight;871 } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {872 //IE 4 compatible873 myWidth = document.body.clientWidth;874 myHeight = document.body.clientHeight;875 }876 return [myHeight, myWidth]; 877 }878 879function getClientHeight(){880 //return the height of the display area881 theSize=getClientSize();882 theHeight=theSize[0];883 return theHeight884}885function getClientWidth(){886 //return the height of the display area887 888 theSize=getClientSize();889 theWidth=theSize[1];890 891 return theWidth892}893function getDocumentWidth() {894 if (document.body.scrollWidth)895 return document.body.scrollWidth;896 897 var w = document.documentElement.offsetWidth;898 899 if (window.scrollMaxX)900 w += window.scrollMaxX;901 return w;902}903function getDocumentHeight() {904 if (document.body.scrollHeight)905 return document.body.scrollHeight;906 907 return document.documentElement.offsetHeight;908}909function getScrollXY() {910//http://www.howtocreate.co.uk/tutorials/javascript/browserwindow911 var scrOfX = 0, scrOfY = 0;912 if( typeof( window.pageYOffset ) == 'number' ) {913 //Netscape compliant914 scrOfY = window.pageYOffset;915 scrOfX = window.pageXOffset;916 } else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {917 //DOM compliant918 scrOfY = document.body.scrollTop;919 scrOfX = document.body.scrollLeft;920 } else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {921 //IE6 standards compliant mode922 scrOfY = document.documentElement.scrollTop;923 scrOfX = document.documentElement.scrollLeft;924 }925 return [scrOfX,scrOfY]926}927function getScrollX(){928 //return the current x scroll - now that the canvas is abosolute not fixed for all but Safari 2, we return 0,except for Safari 2929 930 931 if (isSafari2()) {932 return getScrollXY()[0]933 }934 else {935 return 0936 }937 938}939function getScrollY(){940 //return the current y scroll - now that the canvas is abosolute not fixed for all but Safari 2, we return 0,except for Safari 2941 942 if (isSafari2()) {943 return getScrollXY()[1]944 }945 else {946 return 0947 }948 }949function getIEPropertyName(thePropertyName){950 //IE properties have the form propertyName, as opposed to the property-name951 var newName="";952 if (thePropertyName.indexOf('-')!=0) {953 var parts = new Array();954 parts = thePropertyName.split('-');955 }956 957 newName=parts[0];958 for (var i = 1; i < parts.length; i++){959 nextPart=parts[i].substring(0, 1).toUpperCase();960 newName=newName+nextPart+parts[i].substring(1,parts[i].length)961 }962 963 if (newName=="float") newName='styleFloat'; //IE uses this fo rthe float property 964 return newName;965}966function setElementProperty (theElement, whichStyle, theValue) {967 // set the value for the named property for the element to the given value968 //it's returned as a string so convert to an integer if you need to use it rather than display it969 //elementCSSDeclaration=document.defaultView.getComputedStyle(theElement,"");970 //971 if(!document.defaultView) {972 whichStyle=getIEPropertyName(whichStyle)973 }974 975 if (theElement.currentStyle) {976 theElement.style.whichStyle=theValue;977 978 }979 else if (window.getComputedStyle)980 theElement.style.setProperty(whichStyle, theValue, null);981}982function getElementProperty(theElement, whichStyle)983{984 //adapted from quirksmode.org985 986 //if IE, change format of property name987 988 989 if(!document.defaultView) {990 whichStyle=getIEPropertyName(whichStyle);991 }992 993 if (theElement.currentStyle){ //problem is that this is not computed, its th evalue set, so could be 'auto'994 // alert(whichStyle);995 var y = theElement.currentStyle[whichStyle];996 }997 else if (window.getComputedStyle) {998 var y = document.defaultView.getComputedStyle(theElement,null).getPropertyValue(whichStyle);999 }1000 1001 else {1002 elementCSSDeclaration=document.defaultView.getComputedStyle(theElement,null);1003 y= elementCSSDeclaration.getPropertyValue(whichStyle);1004 }1005 1006 return y;1007}1008function getBorderWidth(theElement, whichBorder){1009 //with IE, the default border is medium, but if the style is none, then this should be 01010 1011 if(supportsCanvas()) {1012 return getIntegerValue(getElementProperty(theElement, whichBorder+"-width"));1013 }1014 //otherwise, it's IE, so we determine if that border has a style, and if it does, return the width, else 01015 1016 //alert(getElementProperty(theElement, whichBorder+"-style"));1017 1018 if(getElementProperty(theElement, whichBorder+"-style")=='none') {1019 //alert(getElementProperty(theElement, whichBorder+"-width"));1020 return 0; //no style so any width is irrelevant1021 }1022 else{1023 //alert(getElementProperty(theElement, whichBorder+"-width"));1024 return getIntegerValue(getElementProperty(theElement, whichBorder+"-width"));1025 }1026 1027 1028}1029function getElementHierarchy (theElement) {1030 // return the inheritance hierarchy in the form parent<grandparent...<root1031 //it's returned as a string so convert to an integer if you need to use it rather than display it1032 var theHierarchy="";1033 var i=0;1034 theHierarchy=theElement.nodeName.toLowerCase();1035 if (theElement.parentNode) {1036 while ((theElement = theElement.parentNode) && (theElement.parentNode!=null)) {1037 i++;1038 //theHierarchy=theHierarchy+'&lt;'+ '<a href="#" onmousedown="xRayAncestor('+ i +')">'+theElement.nodeName.toLowerCase() +'</a>';1039 theHierarchy= '<a href="#" onmousedown="xRayAncestor('+ i +')">'+theElement.nodeName.toLowerCase() +'</a>' +' &gt; '+ theHierarchy;1040 }1041 //alert(theHierarchy); 1042 return theHierarchy;//.toLowerCase();1043 }1044 1045}1046function getIntegerValue(theVal) {1047 //alert(theVal);1048 //these are for the values of border widths. All but IE return an integer value - here we translate based on what IE does1049 if (theVal=='thin') return 2;1050 if (theVal=='medium') return 4;1051 if (theVal=='thick') return 6;1052 1053 var newVal= theVal.substr(0, theVal.length-2).valueOf();1054 1055 if (isNaN(newVal)) {1056 //alert(theVal);1057 return 0;1058 }1059 else {1060 return parseInt(newVal);1061 }1062}1063function clearCanvas () {1064 //delete it and reinsert it1065 if (!supportsCanvas()) {1066 hideOverlays()1067 1068 } 1069 else {1070 var canvas = document.getElementById("WCcanvas");1071 canvas.parentNode.removeChild(canvas);1072 insertCanvas();1073 }1074}1075function eraseCanvas (elementTop, elementLeft, elementWidth, elementHeight) {1076 var canvas = document.getElementById("WCcanvas");1077 var ctx = canvas.getContext("2d");1078ctx.clearRect(elementLeft, elementTop, elementWidth, elementHeight);1079}1080function draw(elementTop, elementLeft, elementWidth, elementHeight, fillColor) {1081 var canvas = document.getElementById("WCcanvas");1082 var ctx = canvas.getContext("2d");1083 showCanvas();1084 ctx.fillStyle = fillColor1085 ctx.fillRect (elementLeft, elementTop, elementWidth, elementHeight);1086//alert(elementLeft + " " + elementTop + " " + elementWidth + " " + elementHeight);1087}1088function drawWidthLine(theElement) {1089 //draw the line to show the width of the content1090 1091 var canvas = document.getElementById("WCcanvas");1092 var ctx = canvas.getContext("2d");1093//assume it's already showing - called after draw - which shows the canvas1094windowScrollX=getScrollX();1095windowScrollY=getScrollY();1096whereIs=getElementOffsetLocation(theElement);1097elementTop=parseInt(whereIs[1])-windowScrollY;1098elementLeft=parseInt(whereIs[0])-windowScrollX;1099elementTopMargin=parseInt(getElementProperty(theElement, 'margin-top'));1100elementBottomMargin=parseInt(getElementProperty(theElement, 'margin-bottom'));1101elementTopPadding=parseInt(getElementProperty(theElement, 'padding-top'));1102elementBottomPadding=parseInt(getElementProperty(theElement, 'padding-bottom'));1103elementLeftPadding=parseInt(getElementProperty(theElement, 'padding-left'));1104elementRightPadding=parseInt(getElementProperty(theElement, 'padding-right'));1105elementVerticalSpace=elementBottomMargin+elementBottomPadding;1106elementBottom=parseInt(theElement.offsetHeight)+elementTop+5;1107elementWidth=parseInt(theElement.offsetWidth);1108ctx.strokeColor='rgba(255,255,255,1)'1109ctx.beginPath;1110//do the line1111ctx.moveTo(elementLeft+elementLeftPadding, elementBottom+2);1112ctx.lineTo(elementLeft+elementWidth-elementRightPadding, elementBottom+2);1113//now do the line limits1114ctx.lineWidth=1;1115ctx.moveTo(elementLeft+elementWidth-elementRightPadding, elementBottom-1);1116ctx.lineTo(elementLeft+elementWidth-elementRightPadding, elementBottom+5);1117ctx.moveTo(elementLeft+elementLeftPadding, elementBottom-1);1118ctx.lineTo(elementLeft+elementLeftPadding, elementBottom+5);1119ctx.stroke();1120//alert(elementLeft+elementWidth);1121ctx.closePath; 1122 1123}1124function drawHeightLine(theElement) {1125 //draw the line to show the height of the content1126 1127 var canvas = document.getElementById("WCcanvas");1128 var ctx = canvas.getContext("2d");1129//assume it's already showing - called after draw - which shows the canvas1130windowScrollX=getScrollX();1131windowScrollY=getScrollY();1132whereIs=getElementOffsetLocation(theElement);1133elementTop=parseInt(whereIs[1])-windowScrollY;1134elementLeft=parseInt(whereIs[0])-windowScrollX;1135elementLeftMargin=parseInt(getElementProperty(theElement, 'margin-left'));1136elementRightMargin=parseInt(getElementProperty(theElement, 'margin-right'));1137elementLeftPadding=parseInt(getElementProperty(theElement, 'padding-left'));1138elementRightPadding=parseInt(getElementProperty(theElement, 'padding-right'));1139elementTopPadding=parseInt(getElementProperty(theElement, 'padding-top'));1140elementTopMargin=parseInt(getElementProperty(theElement, 'margin-top'));1141//alert(elementTopPadding);1142elementHorizontalSpace=elementLeftMargin+elementRightMargin+elementLeftPadding+elementRightPadding;1143elementRight=parseInt(theElement.offsetWidth)+elementLeft+elementHorizontalSpace;1144elementHeight=parseInt(theElement.offsetHeight);1145//elementHeight=parseInt(getElementProperty(theElement, 'top'));1146ctx.strokeColor='rgba(255,255,255,1)'1147ctx.beginPath;1148ctx.moveTo(elementLeft-elementRightMargin-5, elementTop+elementTopPadding);1149ctx.lineTo(elementLeft-elementRightMargin-5, elementTop+elementHeight-elementBottomPadding);1150ctx.moveTo(elementLeft-elementRightMargin-7, elementTop+elementTopPadding);1151ctx.lineTo(elementLeft-elementRightMargin-3, elementTop+elementTopPadding);1152ctx.moveTo(elementLeft-elementRightMargin-7, elementTop+elementHeight-elementBottomPadding);1153ctx.lineTo(elementLeft-elementRightMargin-3, elementTop+elementHeight-elementBottomPadding);1154ctx.stroke();1155//alert(elementLeft+elementWidth);1156ctx.closePath; 1157 1158}1159function drawTopLeft(theElement) {1160 //drawindicate where the top left is - it tricks people1161 1162var canvas = document.getElementById("WCcanvas");1163var ctx = canvas.getContext("2d");1164//assume it's already showing - called after draw - which shows the canvas1165windowScrollX=getScrollX();1166windowScrollY=getScrollY();1167whereIs=getElementOffsetLocation(theElement);1168elementTop=parseInt(whereIs[1])-windowScrollY;1169elementLeft=parseInt(whereIs[0])-windowScrollX;1170elementLeftMargin=parseInt(getElementProperty(theElement, 'margin-left'));1171elementRightMargin=parseInt(getElementProperty(theElement, 'margin-right'));1172elementLeftPadding=parseInt(getElementProperty(theElement, 'padding-left'));1173elementRightPadding=parseInt(getElementProperty(theElement, 'padding-right'));1174elementTopPadding=parseInt(getElementProperty(theElement, 'padding-top'));1175elementHorizontalSpace=elementLeftMargin+elementRightMargin+elementLeftPadding+elementRightPadding;1176elementRight=parseInt(theElement.offsetWidth)+elementLeft+elementHorizontalSpace;1177elementHeight=parseInt(theElement.offsetHeight);1178ctx.save();1179ctx.strokeColor='rgba(255,0,0,1)'1180ctx.beginPath;1181ctx.arc(elementLeft, elementTop, 4, 0, (Math.PI*2), 1);1182ctx.closePath(); 1183ctx.fill();1184ctx.restore(); 1185}1186function xRayElement(theElement) {1187 // alert(theElement.nodeName);1188 // alert(theElement.nodeName); 1189 if(!theElement) return;1190 1191 //if not in sight, scroll to it1192 1193 currentPatient=theElement;1194 drawElementSkeleton(theElement);1195 showElementDetails(theElement);1196 showWidthLabel(theElement);1197 showHeightLabel(theElement);1198 showTopLeftLabel(theElement);1199 1200 scrollToElement(theElement);1201 1202}1203function xRayAncestor(ancestorIndex) {1204 //show the details for the nth ancestor of the currently targetted element1205 var ancestorNode;1206 var i=0;1207 1208 if (currentPatient){1209 ancestorNode=currentPatient;1210 for (var i = 0; i < ancestorIndex; i++){1211 ancestorNode = ancestorNode.parentNode;1212 }1213 }1214 1215 if (ancestorNode) {1216 xRayElement(ancestorNode);1217 }1218}1219function drawPageOverlay(elementTop, elementLeft, elementWidth, elementHeight, color){1220 //for UE - this uses a div element to create the semi transparent overlay over all but the current element1221 //we use four elements for this pageOverlayTop, pageOverlayLeft, pageOverlayBottom, pageOverlayRight1222 1223 1224 IECanvas=getElement('WCIECanvas');1225 IECanvas.style.visibility='visible';1226 IECanvas.style.left='0px';1227 IECanvas.style.top='0px';1228 1229 if (elementTop<0) elementTop=0;1230 if (elementHeight<0) elementHeight=0;1231 1232 //alert(elementTop);1233 1234 if (elementTop>0) {1235 1236 topOverlay=getElement('pageOverlayTop');1237 topOverlay.style.left='0px';1238 topOverlay.style.top='0px';1239 topOverlay.style.width=getClientWidth();1240 topOverlay.style.height=elementTop + "px";1241 topOverlay.style.visibility='visible';1242 topOverlay.style.backgroundColor=color;1243 topOverlay.style.fontSize=0;1244 topOverlay.style.lineHeight=0;1245 }1246 1247 1248 if (getDocumentHeight()-(elementTop + elementHeight)>0) {1249 var bottomHeight=getDocumentHeight()-(elementTop + elementHeight); 1250 }1251 else {1252 bottomHeight=0; 1253 }1254 if (bottomHeight>0) {1255 bottomOverlay=getElement('pageOverlayBottom');1256 bottomOverlay.style.position='absolute';1257 bottomOverlay.style.left='0px'; 1258 bottomOverlay.style.height=bottomHeight + 'px';1259 bottomOverlay.style.top=elementHeight + elementTop+ "px";1260 bottomOverlay.style.width=getClientWidth(); 1261 bottomOverlay.style.visibility='visible';1262 bottomOverlay.style.backgroundColor=color;1263 bottomOverlay.style.fontSize=0;1264 bottomOverlay.style.lineHeight=0;1265 }1266 1267 if (elementHeight>0 && elementLeft>0) {1268 1269 leftOverlay=getElement('pageOverlayLeft');1270 leftOverlay.style.position='absolute';1271 leftOverlay.style.left='0px';1272 leftOverlay.style.top=elementTop + "px";1273 leftOverlay.style.width=elementLeft + "px";1274 leftOverlay.style.height=elementHeight + 'px';1275 leftOverlay.style.visibility='visible';1276 leftOverlay.style.backgroundColor=color;1277 leftOverlay.style.fontSize=0;1278 leftOverlay.style.lineHeight=0;1279 rightOverlay=getElement('pageOverlayRight');1280 rightOverlay.style.position='absolute';1281 rightOverlay.style.left=elementLeft + elementWidth + 'px';1282 rightOverlay.style.top=elementTop + "px";1283 if ((getClientWidth()-elementWidth)>0) {1284 var rightWidth=getClientWidth()-elementWidth + 'px'; 1285 }1286 1287 else {1288 rightWidth=0; 1289 1290 }1291 rightOverlay.style.width=rightWidth; 1292 rightOverlay.style.height=elementHeight+ 'px'; // + elementTop + "px";1293 rightOverlay.style.visibility='visible';1294 rightOverlay.style.backgroundColor=color;1295 rightOverlay.style.fontSize=0;1296 rightOverlay.style.lineHeight=0;1297 }1298}1299function drawTopMargin(elementTop, elementLeft, topMarginWidth, elementWidth, color){1300 //for IE - this uses div elements to create the semi transparent overlay over all but the current element1301 //we use four elements for this marginOverlayTop, marginOverlayLeft, marginOverlayBottom, marginOverlayRight1302 1303 if (elementTop<0) elementTop=0;1304 1305 if (topMarginWidth<1) return;1306 1307 marginOverlay=getElement('marginOverlayTop');1308 marginOverlay.style.left=elementLeft+'px';1309 marginOverlay.style.top=elementTop+'px';1310 marginOverlay.style.width=elementWidth+'px';1311 marginOverlay.style.height=topMarginWidth + "px";1312 marginOverlay.style.visibility='visible';1313 marginOverlay.style.backgroundColor=color;1314 marginOverlay.style.fontSize=0;1315 marginOverlay.style.lineHeight=0; 1316}1317function drawBottomMargin(marginTop, marginLeft, bottomMarginWidth, elementWidth, color){1318 //for IE - this uses div elements to create the semi transparent overlay over all but the current element1319 //we use four elements for this marginOverlayTop, marginOverlayLeft, marginOverlayBottom, marginOverlayRight1320 1321 if (marginTop<0) marginTop=0;1322 1323 if (bottomMarginWidth<1) return;1324 1325 marginOverlay=getElement('marginOverlayBottom');1326 marginOverlay.style.left=marginLeft+'px';1327 marginOverlay.style.top=marginTop+'px';1328 marginOverlay.style.width=elementWidth+'px';1329 marginOverlay.style.height=bottomMarginWidth + "px";1330 marginOverlay.style.visibility='visible';1331 marginOverlay.style.backgroundColor=color;1332 marginOverlay.style.fontSize=0;1333 marginOverlay.style.lineHeight=0; 1334}1335function drawLeftMargin(elementTop, elementLeft, leftMarginWidth, elementHeight, color){1336 //for IE - this uses div elements to create the semi transparent overlay over all but the current element1337 //we use four elements for this marginOverlayTop, marginOverlayLeft, marginOverlayBottom, marginOverlayRight1338 1339 if (elementTop<0) elementTop=0;1340 1341 if (leftMarginWidth<1) return; //don't draw it if its tiny1342 1343 marginOverlay=getElement('marginOverlayLeft');1344 marginOverlay.style.left=elementLeft+'px';1345 marginOverlay.style.top=elementTop+'px';1346 marginOverlay.style.width=leftMarginWidth+'px';1347 marginOverlay.style.height=elementHeight + "px";1348 marginOverlay.style.visibility='visible';1349 marginOverlay.style.backgroundColor=color;1350 marginOverlay.style.fontSize=0;1351 marginOverlay.style.lineHeight=0; 1352}1353function drawRightMargin(marginTop, marginLeft, rightMarginWidth, elementHeight, color){1354 //for IE - this uses div elements to create the semi transparent overlay over all but the current element1355 //we use four elements for this marginOverlayTop, marginOverlayLeft, marginOverlayBottom, marginOverlayRight1356 1357 if (marginTop<0) marginTop=0;1358 1359 if (rightMarginWidth<1) return; //don't draw it if its tiny1360 1361 marginOverlay=getElement('marginOverlayRight');1362 marginOverlay.style.left=marginLeft+'px';1363 marginOverlay.style.top=marginTop+'px';1364 marginOverlay.style.width=rightMarginWidth+'px';1365 marginOverlay.style.height=elementHeight + "px";1366 marginOverlay.style.visibility='visible';1367 marginOverlay.style.backgroundColor=color;1368 marginOverlay.style.fontSize=0;1369 marginOverlay.style.lineHeight=0; 1370}1371function drawTopPadding(paddingTop, paddingLeft, topPaddingWidth, elementWidth, color){1372 //for IE - this uses div elements to create the semi transparent overlay over all but the current element1373 //we use four elements for this marginOverlayTop, marginOverlayLeft, marginOverlayBottom, marginOverlayRight1374 1375 if (paddingTop<0) paddingTop=0;1376 1377 if (topPaddingWidth<1) return;1378 1379 paddingOverlay=getElement('paddingOverlayTop');1380 paddingOverlay.style.left=paddingLeft+'px';1381 paddingOverlay.style.top=paddingTop+'px';1382 paddingOverlay.style.width=elementWidth+'px';1383 paddingOverlay.style.height=topPaddingWidth + "px";1384 paddingOverlay.style.visibility='visible';1385 paddingOverlay.style.backgroundColor=color;1386 paddingOverlay.style.fontSize=0;1387 paddingOverlay.style.lineHeight=0; 1388 1389}1390function drawBottomPadding(paddingTop, paddingLeft, bottomPaddingWidth, elementWidth, color){1391 //for IE - this uses div elements to create the semi transparent overlay over all but the current element1392 //we use four elements for this marginOverlayTop, marginOverlayLeft, marginOverlayBottom, marginOverlayRight1393 1394 if (paddingTop<0) paddingTop=0;1395 1396 if (bottomPaddingWidth<1) return;1397 1398 paddingOverlay=getElement('paddingOverlayBottom');1399 paddingOverlay.style.left=paddingLeft+'px';1400 paddingOverlay.style.top=paddingTop+'px';1401 paddingOverlay.style.width=elementWidth+'px';1402 paddingOverlay.style.height=bottomPaddingWidth + "px";1403 paddingOverlay.style.visibility='visible';1404 paddingOverlay.style.backgroundColor=color;1405 paddingOverlay.style.fontSize=0;1406 paddingOverlay.style.lineHeight=0; 1407}1408function drawLeftPadding(paddingTop, paddingLeft, leftPaddingWidth, elementHeight, color){1409 //for IE - this uses div elements to create the semi transparent overlay over all but the current element1410 //we use four elements for this marginOverlayTop, marginOverlayLeft, marginOverlayBottom, marginOverlayRight1411 1412 if (paddingTop<0) elementTop=0;1413 1414 if (leftPaddingWidth<1) return; //don't draw it if its tiny1415 1416 paddingOverlay=getElement('paddingOverlayLeft');1417 paddingOverlay.style.left=paddingLeft+'px';1418 paddingOverlay.style.top=paddingTop+'px';1419 paddingOverlay.style.width=leftPaddingWidth+'px';1420 paddingOverlay.style.height=elementHeight + "px";1421 paddingOverlay.style.visibility='visible';1422 paddingOverlay.style.backgroundColor=color;1423 paddingOverlay.style.fontSize=0;1424 paddingOverlay.style.lineHeight=0; 1425}1426function drawRightPadding(paddingTop, paddingLeft, rightPaddingWidth, elementHeight, color){1427 //for IE - this uses div elements to create the semi transparent overlay over all but the current element1428 //we use four elements for this marginOverlayTop, marginOverlayLeft, marginOverlayBottom, marginOverlayRight1429 1430 if (paddingTop<0) paddingTop=0;1431 1432 if (rightPaddingWidth<1) return; //don't draw it if its tiny1433 1434 paddingOverlay=getElement('paddingOverlayRight');1435 paddingOverlay.style.left=paddingLeft+'px';1436 paddingOverlay.style.top=paddingTop+'px';1437 paddingOverlay.style.width=rightPaddingWidth+'px';1438 paddingOverlay.style.height=elementHeight + "px";1439 paddingOverlay.style.visibility='visible';1440 paddingOverlay.style.backgroundColor=color;1441 paddingOverlay.style.fontSize=0;1442 paddingOverlay.style.lineHeight=0; 1443}1444var currentPatient; //this is the element currently being xrayed1445function xRayEvent(e) {1446//xray the element - called by the click handler1447if (!e) var e = window.event;1448 if (e.target) var tg = e.target;1449 else if (e.srcElement) var tg = e.srcElement;1450 while (tg.nodeName == '#text'){1451 tg = tg.parentNode;1452 }1453 1454 if (tg.className=='XRAYclosebox'){ 1455 uninstallXRAY();1456 return false;1457 }1458 1459 if (tg.className=='XRAYdetailedLink'){ 1460 document.navigate("http://westciv.com");1461 return true;1462 } 1463 1464 if (inHUD(tg)) return false;1465 1466 xRayElement(tg);1467 return false;1468 1469}1470function drawElementSkeleton(theElement){1471 //draws the 'skeleton' of the given element 1472 1473 whereIs=getElementOffsetLocation(theElement); 1474 1475 elementTop=parseInt(whereIs[1]);1476 elementLeft=parseInt(whereIs[0]);1477 elementWidth=theElement.offsetWidth.valueOf();1478 elementHeight=theElement.offsetHeight.valueOf(); 1479 1480 topPadding=getElementProperty(theElement,'padding-top');1481 topPadding=getIntegerValue(topPadding);1482 1483 bottomPadding=getElementProperty(theElement,'padding-bottom');1484 bottomPadding=getIntegerValue(bottomPadding);1485 leftPadding=getElementProperty(theElement,'padding-left');1486 leftPadding=getIntegerValue(leftPadding);1487 rightPadding=getElementProperty(theElement,'padding-right');1488 rightPadding=getIntegerValue(rightPadding);1489 topMargin=getElementProperty(theElement,'margin-top');1490 topMargin=getIntegerValue(topMargin);1491 bottomMargin=getElementProperty(theElement,'margin-bottom');1492 bottomMargin=getIntegerValue(bottomMargin);1493 leftMargin=getElementProperty(theElement,'margin-left');1494 leftMargin=getIntegerValue(leftMargin);1495 rightMargin=getElementProperty(theElement,'margin-right');1496 rightMargin=getIntegerValue(rightMargin);1497 1498 1499 topBorder=getBorderWidth(theElement,'border-top');1500 bottomBorder=getBorderWidth(theElement,'border-bottom');1501 leftBorder=getBorderWidth(theElement,'border-left');1502 rightBorder=getBorderWidth(theElement,'border-right');1503 1504 1505 clearCanvas();1506 windowScrollX=getScrollX();1507 windowScrollY=getScrollY();1508 1509 if (supportsCanvas()) {...

Full Screen

Full Screen

data-manager.test.js

Source:data-manager.test.js Github

copy

Full Screen

...106 await t.getElementAttribute( SELECTORS.DATA_MANAGER_FILE_DOWNLOAD, 'href' ),107 new RegExp( `${ dataFile.id }$` ),108 );109 t.is(110 await t.getElementProperty( SELECTORS.DATA_MANAGER_ROW_NEXT, 'disabled' ),111 dataFile.records.length < 2,112 );113 t.is(114 await t.getElementProperty( SELECTORS.DATA_MANAGER_ROW_PREVIOUS, 'disabled' ),115 true,116 );117 t.is(118 await t.getElementValue( SELECTORS.DATA_MANAGER_ROW_SELECT ),119 '0',120 );121});122test( 'correct cell names and values visible', defaultResponsesPage, async t => {123 const dataFile = createDataFileFull( DATA_FILES[2], {124 prefix: t.title,125 recordCount: 5,126 });127 await selectDataFile( t, dataFile );128 await t.waitUntilElementGone( SELECTORS.UI_LOADING );129 await t.notFindElement( SELECTORS.UI_ERROR );130 await isDataFileRecordVisible( t, dataFile.records[0]);131});132test( 'can change cell value row', defaultResponsesPage, async t => {133 const dataFile = createDataFileFull( DATA_FILES[3], {134 prefix: t.title,135 recordCount: 8,136 });137 await selectDataFile( t, dataFile );138 await t.waitUntilElementGone( SELECTORS.UI_LOADING );139 await t.notFindElement( SELECTORS.UI_ERROR );140 await isDataFileRecordVisible( t, dataFile.records[0]);141 t.page.select( SELECTORS.DATA_MANAGER_ROW_SELECT, '5' );142 await respondOnPlanChange( t, {143 dataSampleId: dataFile.id,144 dataSampleRow: 5,145 updateCount: 2,146 });147 await isDataFileRecordVisible( t, dataFile.records[5]);148 t.page.click( SELECTORS.DATA_MANAGER_ROW_NEXT );149 await respondOnPlanChange( t, {150 dataSampleId: dataFile.id,151 dataSampleRow: 6,152 updateCount: 3,153 });154 await isDataFileRecordVisible( t, dataFile.records[6]);155 t.page.click( SELECTORS.DATA_MANAGER_ROW_PREVIOUS );156 await respondOnPlanChange( t, {157 dataSampleId: dataFile.id,158 dataSampleRow: 5,159 updateCount: 4,160 });161 await isDataFileRecordVisible( t, dataFile.records[5]);162});163test( 'row buttons correctly disabled', defaultResponsesPage, async t => {164 /// data file with one row:165 const dataFile1 = createDataFileFull( DATA_FILES[2], {166 prefix: `${ t.title }-1-record`,167 recordCount: 1,168 });169 await selectDataFile( t, dataFile1 );170 await t.waitUntilElementGone( SELECTORS.UI_LOADING );171 await t.notFindElement( SELECTORS.UI_ERROR );172 await isDataFileRecordVisible( t, dataFile1.records[0]);173 t.is(174 await t.getElementProperty( SELECTORS.DATA_MANAGER_ROW_NEXT, 'disabled' ),175 true,176 );177 t.is(178 await t.getElementProperty( SELECTORS.DATA_MANAGER_ROW_PREVIOUS, 'disabled' ),179 true,180 );181 /// data file with four rows:182 const dataFile4 = createDataFileFull( DATA_FILES[3], {183 prefix: `${ t.title }-4-records`,184 recordCount: 4,185 });186 await selectDataFile( t, dataFile4, {187 updateCount: 2,188 });189 await t.waitUntilElementGone( SELECTORS.UI_LOADING );190 await t.notFindElement( SELECTORS.UI_ERROR );191 await isDataFileRecordVisible( t, dataFile4.records[0]);192 t.is(193 await t.getElementProperty( SELECTORS.DATA_MANAGER_ROW_NEXT, 'disabled' ),194 false,195 );196 t.is(197 await t.getElementProperty( SELECTORS.DATA_MANAGER_ROW_PREVIOUS, 'disabled' ),198 true,199 );200 t.page.select( SELECTORS.DATA_MANAGER_ROW_SELECT, '2' );201 await respondOnPlanChange( t, {202 dataSampleId: dataFile4.id,203 dataSampleRow: 2,204 updateCount: 3,205 });206 await isDataFileRecordVisible( t, dataFile4.records[2]);207 t.is(208 await t.getElementProperty( SELECTORS.DATA_MANAGER_ROW_NEXT, 'disabled' ),209 false,210 );211 t.is(212 await t.getElementProperty( SELECTORS.DATA_MANAGER_ROW_PREVIOUS, 'disabled' ),213 false,214 );215 t.page.click( SELECTORS.DATA_MANAGER_ROW_NEXT );216 await respondOnPlanChange( t, {217 dataSampleId: dataFile4.id,218 dataSampleRow: 3,219 updateCount: 4,220 });221 await isDataFileRecordVisible( t, dataFile4.records[3]);222 t.is(223 await t.getElementProperty( SELECTORS.DATA_MANAGER_ROW_NEXT, 'disabled' ),224 true,225 );226 t.is(227 await t.getElementProperty( SELECTORS.DATA_MANAGER_ROW_PREVIOUS, 'disabled' ),228 false,229 );230 t.page.select( SELECTORS.DATA_MANAGER_ROW_SELECT, '1' );231 await respondOnPlanChange( t, {232 dataSampleId: dataFile4.id,233 dataSampleRow: 1,234 updateCount: 5,235 });236 await isDataFileRecordVisible( t, dataFile4.records[1]);237 t.is(238 await t.getElementProperty( SELECTORS.DATA_MANAGER_ROW_NEXT, 'disabled' ),239 false,240 );241 t.is(242 await t.getElementProperty( SELECTORS.DATA_MANAGER_ROW_PREVIOUS, 'disabled' ),243 false,244 );245 t.page.click( SELECTORS.DATA_MANAGER_ROW_PREVIOUS );246 await respondOnPlanChange( t, {247 dataSampleId: dataFile4.id,248 dataSampleRow: 0,249 updateCount: 6,250 });251 await isDataFileRecordVisible( t, dataFile4.records[0]);252 t.is(253 await t.getElementProperty( SELECTORS.DATA_MANAGER_ROW_NEXT, 'disabled' ),254 false,255 );256 t.is(257 await t.getElementProperty( SELECTORS.DATA_MANAGER_ROW_PREVIOUS, 'disabled' ),258 true,259 );260});261test.todo( 'can download file' );...

Full Screen

Full Screen

NewUser.spec.js

Source:NewUser.spec.js Github

copy

Full Screen

...23 element.getContinue_Button().click()24 25 login.Field_Password(this.data.password1)26 27 element.getElementProperty().contains("Create Account").click({force: true})28 element.getMobileNumber_Textfield().type(this.data.phoneNumber1)29 30 element.getElementProperty().contains("Send Code").click({force: true}) 31 })32 it('Create an Account--Edit Number functionality',function()33 {34 Cypress.config('defaultCommandTimeout',5000)35 cy.visit(Cypress.env('url_prod1'))36 const login = new ExistingUserPage()37 const element = new ElementIDPage()38 login.clickPopUp_Element()39 login.Email_Field(this.data.email2)40 element.getContinue_Button().click()41 login.Field_Password(this.data.password2)42 element.getElementProperty().contains("Create Account").click({force: true})43 element.getMobileNumber_Textfield().type(this.data.phoneNumber1)44 element.getElementProperty().contains("Send Code").click({force: true}) 45 46 element.getEditNumber_link().click({force: true})47 48 element.getMobileNumber_Textfield2().should("have.value","571-297-5052").clear().type(this.data.phoneNumber2)49 element.getElementProperty().contains("Send Code").click({force: true}) 50 })51 52 it('Create an Account--Invalid Code Entered',function()53 {54 Cypress.config('defaultCommandTimeout',5000)55 cy.visit(Cypress.env('url_prod1'))56 const login = new ExistingUserPage()57 const element = new ElementIDPage()58 login.clickPopUp_Element()59 login.Email_Field(this.data.email3)60 element.getContinue_Button().click()61 login.Field_Password(this.data.password3)62 element.getElementProperty().contains("Create Account").click({force: true})63 element.getMobileNumber_Textfield().type(this.data.phoneNumber2)64 element.getElementProperty().contains("Send Code").click({force: true})65 66 element.getCode_TextField().type(this.data.Invalid_TempCode3)67 element.getSubmit_button().click({force: true}) 68 element.getErrorMessage_accountCreation().contains("Check your code and try again.").should("be.visible") 69 })70 it('Create an Account--Invalid Code and Error message cleared--Send New Code',function()71 {72 Cypress.config('defaultCommandTimeout',5000)73 cy.visit(Cypress.env('url_prod1'))74 const login = new ExistingUserPage()75 const element = new ElementIDPage()76 login.clickPopUp_Element()77 element.getEmail_TextField().type(this.data.email4)78 element.getContinue_Button().click()79 login.Field_Password(this.data.password4)80 element.getElementProperty().contains("Create Account").click({force: true})81 element.getMobileNumber_Textfield().type(this.data.phoneNumber2)82 element.getElementProperty().contains("Send Code").click({force: true})83 84 element.getCode_TextField().type(this.data.Invalid_TempCode4)85 element.getSubmit_button().click({force: true}) 86 element.getErrorMessage_accountCreation().contains("Check your code and try again.").should("be.visible") 87 88 // Send New Code and Clear Error message 89 element.getElementProperty().eq(2).click({force: true})90 cy.wait(2000)91 })92 it('Confirm Verification Code--Skip Confirmation Link',function() 93 {94 Cypress.config('defaultCommandTimeout',5000)95 cy.visit(Cypress.env('url_prod1'))96 const login = new ExistingUserPage()97 const element = new ElementIDPage()98 login.clickPopUp_Element()99 element.getEmail_TextField().type(this.data.email5)100 element.getContinue_Button().click()101 login.Field_Password(this.data.password5)102 element.getElementProperty().contains("Create Account").click({force: true})103 element.getMobileNumber_Textfield().type(this.data.phoneNumber2)104 element.getElementProperty().contains("Send Code").click({force: true})105 element.getSkips_link().click({force: true})106 cy.title().should("eq","Wayfair.com - Online Home Store for Furniture, Decor, Outdoors & More")107 })108 109 it('Add Phone Number during Enrollment--No Thanks',function()110 {111 Cypress.config('defaultCommandTimeout',5000)112 cy.visit(Cypress.env('url_prod1'))113 const login = new ExistingUserPage()114 const element = new ElementIDPage()115 login.clickPopUp_Element()116 element.getEmail_TextField().type(this.data.email6)117 element.getContinue_Button().click()118 login.Field_Password(this.data.password6)119 element.getElementProperty().contains("Create Account").click({force: true})120 121 element.getSkips_link().click({force: true})122 cy.title().should("eq","Wayfair.com - Online Home Store for Furniture, Decor, Outdoors & More")123 124 })125 it('User Navigated to Wayfair Legal Center--privacy Policy Link',function()126 {127 Cypress.config('defaultCommandTimeout',5000)128 cy.visit(Cypress.env('url_prod1'))129 const login = new ExistingUserPage()130 const element = new ElementIDPage()131 login.clickPopUp_Element()132 element.getEmail_TextField().type(this.data.email7)133 ...

Full Screen

Full Screen

test-amp-sidebar.js

Source:test-amp-sidebar.js Github

copy

Full Screen

...29 controller = env.controller;30 });31 it('should render correctly', async () => {32 const sidebar = await controller.findElement('#sidebar');33 await expect(controller.getElementProperty(sidebar, 'hidden')).to.be.true;34 const image = await controller.findElement('#image');35 await expect(36 controller.getElementProperty(image, 'clientWidth')37 ).to.equal(0);38 });39 it('should open the sidebar', async () => {40 const open = await controller.findElement('#open');41 await controller.click(open);42 const sidebar = await controller.findElement('#sidebar');43 await expect(controller.getElementProperty(sidebar, 'hidden')).to.be44 .false;45 // Wait for the button to become visible46 await controller.switchToShadowRoot(sidebar);47 const backdrop = await controller.findElement('[part=backdrop]');48 // After open animation completed backdrop's49 // inline opacity style is cleared50 await expect(51 controller.getElementProperty(backdrop, 'style')52 ).to.have.length(0);53 await expect(controller.getElementRect(sidebar)).to.include({54 width: 300,55 left: 0,56 });57 await controller.switchToLight();58 const checkWidth = await controller.findElement('#checkWidth');59 await expect(60 controller.getElementProperty(checkWidth, 'clientWidth')61 ).to.equal(300);62 });63 it('should close the sidebar on button click', async () => {64 const open = await controller.findElement('#open');65 await controller.click(open);66 const sidebar = await controller.findElement('#sidebar');67 await expect(controller.getElementProperty(sidebar, 'hidden')).to.be68 .false;69 // Wait for the button to become visible70 await controller.switchToShadowRoot(sidebar);71 const backdrop = await controller.findElement('[part=backdrop]');72 // After open animation completed backdrop's73 // inline opacity style is cleared74 await expect(75 controller.getElementProperty(backdrop, 'style')76 ).to.have.length(0);77 await expect(controller.getElementRect(sidebar)).to.include({78 width: 300,79 right: 300,80 });81 await controller.switchToLight();82 const close = await controller.findElement('#close');83 await controller.click(close);84 await expect(controller.getElementProperty(sidebar, 'hidden')).to.be.true;85 });86 it('should close the sidebar on esc', async () => {87 const open = await controller.findElement('#open');88 await controller.click(open);89 const sidebar = await controller.findElement('#sidebar');90 await expect(controller.getElementProperty(sidebar, 'hidden')).to.be91 .false;92 await controller.type(null, Key.Escape);93 await expect(controller.getElementProperty(sidebar, 'hidden')).to.be.true;94 });95 it('should close the sidebar on click outside', async () => {96 const open = await controller.findElement('#open');97 await controller.click(open);98 const sidebar = await controller.findElement('#sidebar');99 await expect(controller.getElementProperty(sidebar, 'hidden')).to.be100 .false;101 await controller.switchToShadowRoot(sidebar);102 const backdrop = await controller.findElement('[part=backdrop]');103 await controller.click(backdrop);104 await expect(controller.getElementProperty(sidebar, 'hidden')).to.be.true;105 });106 }...

Full Screen

Full Screen

test-amp-accordion.js

Source:test-amp-accordion.js Github

copy

Full Screen

...40 });41 it('expands and collapses when a header section is clicked', async () => {42 // section 1 is not expanded43 await expect(44 controller.getElementProperty(content1, 'clientHeight')45 ).to.equal(0);46 await controller.click(header1);47 // section 1 is expanded48 await expect(49 controller.getElementProperty(content1, 'clientHeight')50 ).to.equal(25);51 await controller.click(header1);52 // section 1 is collapsed53 await expect(54 controller.getElementProperty(content1, 'clientHeight')55 ).to.equal(0);56 });57 it('renders section in expanded state when expanded attribute provided', async () => {58 // section 3 should start in expanded state since it has59 // "expanded" attribute60 await expect(61 controller.getElementProperty(content3, 'clientHeight')62 ).to.equal(25);63 });64 it('expands and collapses when buttons are clicked', async () => {65 // section 1 is not expanded66 await expect(67 controller.getElementProperty(content1, 'clientHeight')68 ).to.equal(0);69 // toggle section 170 await controller.click(button1);71 // section 1 is expanded72 await expect(73 controller.getElementProperty(content1, 'clientHeight')74 ).to.equal(25);75 // collapse all button76 await controller.click(button2);77 // all sections collapsed78 await expect(79 controller.getElementProperty(content1, 'clientHeight')80 ).to.equal(0);81 await expect(82 controller.getElementProperty(content2, 'clientHeight')83 ).to.equal(0);84 await expect(85 controller.getElementProperty(content3, 'clientHeight')86 ).to.equal(0);87 });88 }...

Full Screen

Full Screen

e2e.js

Source:e2e.js Github

copy

Full Screen

...7 });8 const compares = [];9 compares.push(await page.compareScreenshot('reorder: interactive before move'));10 const items = await page.$$('ion-reorder');11 const getItemId = await getElementProperty(items[0], 'id');12 expect(getItemId).toEqual('item-0');13 await moveItem(getItemId, page, 'down', 1);14 const itemsAfterFirstMove = await page.$$('ion-reorder');15 expect(await getElementProperty(itemsAfterFirstMove[0], 'id')).toEqual('item-1');16 await moveItem(getItemId, page, 'up', 1);17 const itemsAfterSecondMove = await page.$$('ion-reorder');18 expect(await getElementProperty(itemsAfterSecondMove[0], 'id')).toEqual('item-0');19 compares.push(await page.compareScreenshot('reorder: interactive after move; before shadow move'));20 const shadowDomList = await queryDeep(page, 'test-reorder-list-shadow-dom', 'ion-list');21 const itemsInShadowRoot = await shadowDomList.$$('ion-reorder');22 const getShadowItemId = await getElementProperty(itemsInShadowRoot[0], 'id');23 expect(getShadowItemId).toEqual('item-0');24 await moveItem(getShadowItemId, page, 'down', 1, 'test-reorder-list-shadow-dom', 'ion-list');25 const itemsInShadowRootAfterFirstMove = await shadowDomList.$$('ion-reorder');26 expect(await getElementProperty(itemsInShadowRootAfterFirstMove[0], 'id')).toEqual('item-1');27 await moveItem(getShadowItemId, page, 'up', 1, 'test-reorder-list-shadow-dom', 'ion-list');28 const itemsInShadowRootAfterSecondMove = await shadowDomList.$$('ion-reorder');29 expect(await getElementProperty(itemsInShadowRootAfterSecondMove[0], 'id')).toEqual('item-0');30 compares.push(await page.compareScreenshot('reorder: interactive after shadow move'));31 for (const compare of compares) {32 expect(compare).toMatchScreenshot();33 }34});35async function moveItem(id, page, direction = 'up', numberOfSpaces = 1, ...parentSelectors) {36 try {37 await moveReorderItem(`#${id}`, page, direction, numberOfSpaces, ...parentSelectors);38 }39 catch (err) {40 throw err;41 }...

Full Screen

Full Screen

getElementProperty.js

Source:getElementProperty.js Github

copy

Full Screen

...4 *5 * @example6 * module.exports = {7 * demoTest(browser) {8 * browser.getElementProperty('#login input[type=text]', 'classList', function(result) {9 * console.log('result', result);10 * });11 *12 * // with explicit locate strategy13 * browser.getElementProperty('css selector', '#login input[type=text]', 'classList', function(result) {14 * console.log('result', result);15 * });16 *17 * // with selector object - see https://nightwatchjs.org/guide#element-properties18 * browser.getElementProperty({19 * selector: '#login input[type=text]',20 * index: 1,21 * suppressNotFoundErrors: true22 * }, 'classList', function(result) {23 * console.log('result', result);24 * });25 * },26 *27 * demoTestAsync: async function(browser) {28 * const result = await browser.getElementProperty('#login input[type=text]', 'classList');29 * console.log('classList', result);30 * }31 * }32 *33 * @method getElementProperty34 * @syntax .getElementProperty(selector, property, callback)35 * @syntax .getElementProperty(using, selector, property, callback)36 * @param {string} [using] The locator strategy to use. See [W3C Webdriver - locator strategies](https://www.w3.org/TR/webdriver/#locator-strategies)37 * @param {string|object} selector The selector (CSS/Xpath) used to locate the element. Can either be a string or an object which specifies [element properties](https://nightwatchjs.org/guide#element-properties).38 * @param {string} property The property to inspect.39 * @param {function} callback Callback function which is called with the result value; not required if using `await` operator.40 * @returns {*} The value of the property41 * @api protocol.elementstate42 * @link /#get-element-property43 */44class GetElementProperty extends BaseElementCommand {45 get extraArgsCount() {46 return 1;47 }48 get elementProtocolAction() {49 return 'getElementProperty';...

Full Screen

Full Screen

elementProperties.js

Source:elementProperties.js Github

copy

Full Screen

1function GetElementMainProperty(diagram, key) {2 return diagram.getSelectedNodes()[0].node.settings.elementProperties[key];3}4function SaveInputPropertyEncoded(h, htmlId) {5 if ($("#" + htmlId).val().length != 0) {6 h[htmlId] = chars.encode($("#" + htmlId).val());7 }8}9function SetNameProperty(diagram) {10 $("#name").val(diagram.getSelectedNodes()[0].settings.label);11}12function SaveNameProperty(diagram) {13 if (diagram.getSelectedNodes()[0].settings.label != ($("#name").val()))14 diagram.getSelectedNodes()[0].setLabelColor('#ff0000');15 diagram.getSelectedNodes()[0].setLabel(($("#name").val()));16}17function SaveInputProperty(h, htmlId) {18 h[htmlId] = $("#" + htmlId).val();19}20function GetElementProperty(diagram, key) {21 if (diagram.getSelectedNodes()[0].settings.hasOwnProperty('elementProperties')22 && diagram.getSelectedNodes()[0].settings.elementProperties != null23 )24 return diagram.getSelectedNodes()[0].settings.elementProperties[key];25 return null;26}27function SetCheckBoxElementProperty(diagram, htmlId, defaultValue, trueValue) {28 var val =29 GetElementProperty(diagram, htmlId) == null30 ? defaultValue31 : GetElementProperty(diagram, htmlId);32 $("#" + htmlId + "").prop("checked", val == trueValue);33}34function SaveCheckboxProperty(h, htmlId, trueValue, falseValue) {35 h[htmlId] = $("#" + htmlId).is(":checked") ? trueValue : falseValue;36}37function SetInputElementPropertyDecoded(diagram, htmlId, defaultValue) {38 var propValue = GetElementProperty(diagram, htmlId);39 if (propValue != null) {40 if (propValue.indexOf("&amp;gt;") > -1) {41 throw "Invalid string encoding.";42 }43 $("#" + htmlId + "").val(chars.decode(propValue));44 } else $("#" + htmlId + "").val(defaultValue);45}46function SetInputElementProperty(diagram, htmlId, defaultValue) {47 var propValue = GetElementProperty(diagram, htmlId);48 if (propValue != null) $("#" + htmlId + "").val(propValue);49 else $("#" + htmlId + "").val(defaultValue);...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1var webdriverio = require('webdriverio');2var options = {3 desiredCapabilities: {4 }5};6 .remote(options)7 .init()8 .getTitle().then(function(title) {9 console.log('Title was: ' + title);10 })11 .setValue('#lst-ib', 'WebdriverIO')12 .click('#tsbb')13 .pause(1000)14 .getTitle().then(function(title) {15 console.log('Title is: ' + title);16 })17 .end();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1var webdriverio = require('webdriverio');2var options = {3 desiredCapabilities: {4 }5};6 .remote(options)7 .init()8 .getTitle().then(function(title) {9 console.log('Title was: ' + title);10 })11 .setValue('#lst-ib', 'WebdriverIO')12 .keys('Enter')13 .pause(2000)14 .getTitle().then(function(title) {15 console.log('Title is: ' + title);16 })17 .saveScreenshot('google.png')18 .end();19var webdriverio = require('webdriverio');20var options = {21 desiredCapabilities: {22 }23};24 .remote(options)25 .init()26 .getTitle().then(function(title) {27 console.log('Title was: ' + title);28 })29 .getElementProperty('#lst-ib', 'value').then(function(value) {30 console.log('Value is: ' + value);31 })32 .end();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1var webdriverio = require('webdriverio');2var options = { desiredCapabilities: { browserName: 'chrome' } };3var client = webdriverio.remote(options);4 .init()5 .setValue('*[name="q"]','webdriverio')6 .click('*[name="btnG"]')7 .pause(1000)8 .getTitle().then(function(title) {9 console.log('Title was: ' + title);10 })11 .end();12 .init()13 .setValue('*[name="q"]','webdriverio')14 .click('*[name="btnG"]')15 .pause(1000)16 .getTitle().then(function(title) {17 console.log('Title was: ' + title);18 })19 .end();20 .init()21 .setValue('*[name="q"]','webdriverio')22 .click('*[name="btnG"]')23 .pause(1000)24 .getTitle().then(function(title) {25 console.log('Title was: ' + title);26 })27 .end();28 .init()29 .setValue('*[name="q"]','webdriverio')30 .click('*[name="btnG"]')31 .pause(1000)32 .getTitle().then(function(title) {33 console.log('Title was: ' + title);34 })35 .end();36 .init()37 .setValue('*[name="q"]','webdriverio')38 .click('*[name="btnG"]')39 .pause(1000)40 .getTitle().then(function(title) {41 console.log('Title was: ' + title);42 })43 .end();44 .init()45 .setValue('*[name="q"]','webdriverio')46 .click('*[name="btnG"]')47 .pause(1000)48 .getTitle().then(function(title) {49 console.log('Title was: ' + title);50 })51 .end();52 .init()53 .setValue('*[name="q"]','webdriver

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1var webdriverio = require('webdriverio');2var options = { desiredCapabilities: { browserName: 'chrome' } };3var client = webdriverio.remote(options);4.init()5.getTitle().then(function(title) {6 console.log('Title was: ' + title);7})8.end();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1let webdriverio = require('webdriverio');2let assert = require('assert');3let options = {4 desiredCapabilities: {5 }6};7let client = webdriverio.remote(options);8 .init()9 .setValue('input[name="q"]', 'WebdriverIO')10 .click('button[name="btnK"]')11 .pause(2000)12 .getTitle().then(function(title) {13 console.log('Title is: ' + title);14 })15 .end();16let webdriverio = require('webdriverio');17let assert = require('assert');18let options = {19 desiredCapabilities: {20 }21};22let client = webdriverio.remote(options);23 .init()24 .setValue('input[name="q"]', 'WebdriverIO')25 .click('button[name="btnK"]')26 .pause(2000)27 .getAttribute('input[name="q"]', 'value').then(function(value) {28 console.log('Input field value is: ' + value);29 })30 .end();31let webdriverio = require('webdriverio');32let assert = require('assert');33let options = {34 desiredCapabilities: {35 }36};37let client = webdriverio.remote(options);38 .init()39 .setValue('input[name="q"]', 'WebdriverIO')40 .click('button[name="btnK"]')41 .pause(2000)42 .getHTML('#resultStats').then(function(html) {43 console.log('HTML of element is: ' + html);44 })45 .end();46let webdriverio = require('webdriverio');47let assert = require('assert

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1browser.elementIdAttribute('id', 'class', function(err, res) {2 console.log(res.value);3});4driver.findElement(By.id('id')).getAttribute('class').then(function(value) {5 console.log(value);6});

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const element = await client.$('selector');2const property = await element.getProperty('property');3const element = await page.$('selector');4const property = await page.evaluate(element => element.property, element);5const element = await page.$('selector');6const property = await element.getProperty('property');7cy.get('selector').invoke('property').then((property) => {8});9const element = await Selector('selector');10const property = await element.property;11const element = await element(by.css('selector'));12const property = await element.property;13const element = await browser.element('selector');14const property = await element.property;15const element = await driver.findElement(By.css('selector'));16const property = await element.property;17const element = await driver.$('selector');18const property = await element.property;19const element = await browser.$('selector');20const property = await element.property;21const element = await browser.elementByCss('selector');22const property = await element.property;23const element = await find('selector');24const property = await element.property;25const element = await browser.$('selector');26const property = await element.property;

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const element = $('div#divId');2const elementProperty = element.getElementProperty('class');3console.log(elementProperty);4const element = $('div#divId');5const elementProperty = element.getProperty('class');6console.log(elementProperty);

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1console.log(browser.getAttribute('div#id', 'class'));2console.log(browser.getAttribute('div#id', 'class'));3console.log(browser.getAttribute('div#id', 'class'));4console.log(browser.getAttribute('div#id', 'class'));5console.log(browser.getAttribute('div#id', 'class'));6console.log(browser.getAttribute('div#id', 'class'));7console.log(browser.getAttribute('div#id', 'class'));8console.log(browser.getAttribute('div#id', 'class'));9console.log(browser.getAttribute('div#id', 'class'));10console.log(browser.getAttribute('div#id', 'class'));11console.log(browser.getAttribute('div#id', 'class'));12console.log(browser.getAttribute('div#id', 'class'));13console.log(browser.getAttribute('div#id', 'class'));

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const element = await browser.$('button');2console.log(value);3const value = await element.getAttribute(attributeName);4const element = await browser.$('button');5console.log(value);6const value = await element.getCSSProperty(propertyName);7const element = await browser.$('button');8console.log(value);

Full Screen

Full Screen

WebdriverIO Tutorial

Wondering what could be a next-gen browser and mobile test automation framework that is also simple and concise? Yes, that’s right, it's WebdriverIO. Since the setup is very easy to follow compared to Selenium testing configuration, you can configure the features manually thereby being the center of attraction for automation testing. Therefore the testers adopt WedriverIO to fulfill their needs of browser testing.

Learn to run automation testing with WebdriverIO tutorial. Go from a beginner to a professional automation test expert with LambdaTest WebdriverIO tutorial.

Chapters

  1. Running Your First Automation Script - Learn the steps involved to execute your first Test Automation Script using WebdriverIO since the setup is very easy to follow and the features can be configured manually.

  2. Selenium Automation With WebdriverIO - Read more about automation testing with WebdriverIO and how it supports both browsers and mobile devices.

  3. Browser Commands For Selenium Testing - Understand more about the barriers faced while working on your Selenium Automation Scripts in WebdriverIO, the ‘browser’ object and how to use them?

  4. Handling Alerts & Overlay In Selenium - Learn different types of alerts faced during automation, how to handle these alerts and pops and also overlay modal in WebdriverIO.

  5. How To Use Selenium Locators? - Understand how Webdriver uses selenium locators in a most unique way since having to choose web elements very carefully for script execution is very important to get stable test results.

  6. Deep Selectors In Selenium WebdriverIO - The most popular automation testing framework that is extensively adopted by all the testers at a global level is WebdriverIO. Learn how you can use Deep Selectors in Selenium WebdriverIO.

  7. Handling Dropdown In Selenium - Learn more about handling dropdowns and how it's important while performing automated browser testing.

  8. Automated Monkey Testing with Selenium & WebdriverIO - Understand how you can leverage the amazing quality of WebdriverIO along with selenium framework to automate monkey testing of your website or web applications.

  9. JavaScript Testing with Selenium and WebdriverIO - Speed up your Javascript testing with Selenium and WebdriverIO.

  10. Cross Browser Testing With WebdriverIO - Learn more with this step-by-step tutorial about WebdriverIO framework and how cross-browser testing is done with WebdriverIO.

Run Webdriverio automation tests on LambdaTest cloud grid

Perform automation testing on 3000+ real desktop and mobile devices online.

... View sample repo... View DocumentationSign up Free
›
_

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

...
Sign up with GoogleSign up with Email
Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful