How to use getCSSProperty method in Webdriverio

Best JavaScript code snippet using webdriverio-monorepo

cssviewer.js

Source:cssviewer.js Github

copy

Full Screen

1/*!2* CSSViewer, A Mozilla Firefox Web Extension for fellow web developers, web designers, and hobbyists.3* https://github.com/mohsenkhanpour/CSSViewer4* 5*6* This source code is licensed under the Mozilla Public License,7* Version 2.0.8* Mohsen Khanpour, 20189*/10// Roadmap/ToDos11// 1. Make the initial code more readable 12// 2. Comment the initial code13// 3. Fix issues if any14// 4. Add new features (feasible and useful ones)15// 5. Make a new branch and start re-factoring the entire code16/*17** Globals18*/19var CSSViewer_element20var CSSViewer_element_cssDefinition21var CSSViewer_container22var CSSViewer_current_element23// CSS Properties24var CSSViewer_pFont = new Array(25 'font-family', 26 'font-size', 27 'font-style', 28 'font-variant', 29 'font-weight', 30 'letter-spacing', 31 'line-height', 32 'text-decoration', 33 'text-align', 34 'text-indent', 35 'text-transform', 36 'vertical-align', 37 'white-space', 38 'word-spacing'39);40var CSSViewer_pColorBg = new Array(41 'background-attachment', 42 'background-color', 43 'background-image',44 'background-position',45 'background-repeat',46 'color'47);48var CSSViewer_pBox = new Array(49 'height',50 'width',51 'border',52 'border-top',53 'border-right',54 'border-bottom', 55 'border-left',56 'margin',57 'padding',58 'max-height',59 'min-height',60 'max-width',61 'min-width'62);63var CSSViewer_pPositioning = new Array(64 'position', 65 'top', 66 'bottom', 67 'right', 68 'left', 69 'float', 70 'display', 71 'clear', 72 'z-index'73);74var CSSViewer_pList = new Array(75 'list-style-image', 76 'list-style-type', 77 'list-style-position'78);79var CSSViewer_pTable = new Array(80 'border-collapse',81 'border-spacing',82 'caption-side',83 'empty-cells',84 'table-layout'85);86var CSSViewer_pMisc = new Array(87 'overflow', 88 'cursor', 89 'visibility'90);91var CSSViewer_pEffect = new Array(92 'transform',93 'transition',94 'outline',95 'outline-offset',96 'box-sizing',97 'resize',98 'text-shadow',99 'text-overflow',100 'word-wrap',101 'box-shadow',102 'border-top-left-radius',103 'border-top-right-radius',104 'border-bottom-left-radius',105 'border-bottom-right-radius'106);107// CSS Property categories108var CSSViewer_categories = { 109 'pFontText' : CSSViewer_pFont, 110 'pColorBg' : CSSViewer_pColorBg, 111 'pBox' : CSSViewer_pBox, 112 'pPositioning' : CSSViewer_pPositioning, 113 'pList' : CSSViewer_pList, 114 'pTable' : CSSViewer_pTable, 115 'pMisc' : CSSViewer_pMisc, 116 'pEffect' : CSSViewer_pEffect 117};118var CSSViewer_categoriesTitle = { 119 'pFontText' : 'Font & Text', 120 'pColorBg' : 'Color & Background', 121 'pBox' : 'Box', 122 'pPositioning' : 'Positioning', 123 'pList' : 'List', 124 'pTable' : 'Table', 125 'pMisc' : 'Miscellaneous', 126 'pEffect' : 'Effects' 127};128// Table tagnames129var CSSViewer_tableTagNames = new Array(130 'TABLE',131 'CAPTION',132 'THEAD',133 'TBODY',134 'TFOOT',135 'COLGROUP',136 'COL',137 'TR',138 'TH',139 'TD'140);141var CSSViewer_listTagNames = new Array(142 'UL',143 'LI',144 'DD',145 'DT',146 'OL'147);148// Hexadecimal149var CSSViewer_hexa = new Array(150 '0',151 '1',152 '2',153 '3',154 '4',155 '5',156 '6',157 '7',158 '8',159 '9',160 'A',161 'B',162 'C',163 'D',164 'E',165 'F'166);167/*168** Utils169*/170function GetCurrentDocument()171{172 return window.document;173}174function IsInArray(array, name)175{176 for (var i = 0; i < array.length; i++) {177 if (name == array[i])178 return true;179 }180 return false;181}182function DecToHex(nb)183{184 var nbHexa = '';185 nbHexa += CSSViewer_hexa[Math.floor(nb / 16)];186 nb = nb % 16;187 nbHexa += CSSViewer_hexa[nb];188 189 return nbHexa;190}191function RGBToHex(str)192{193 var start = str.search(/\(/) + 1;194 var end = str.search(/\)/);195 str = str.slice(start, end);196 var hexValues = str.split(', ');197 var hexStr = '#'; 198 for (var i = 0; i < hexValues.length; i++) {199 hexStr += DecToHex(hexValues[i]);200 }201 202 if( hexStr == "#00000000" ){203 hexStr = "#FFFFFF";204 }205 206 hexStr = '<span style="border: 1px solid #000000 !important;width: 8px !important;height: 8px !important;display: inline-block !important;background-color:'+ hexStr +' !important;"></span> ' + hexStr;207 return hexStr;208}209function GetFileName(str)210{211 var start = str.search(/\(/) + 1;212 var end = str.search(/\)/);213 str = str.slice(start, end);214 var path = str.split('/');215 216 return path[path.length - 1];217}218function RemoveExtraFloat(nb)219{220 nb = nb.substr(0, nb.length - 2);221 return Math.round(nb) + 'px';222}223/*224* CSSFunc225*/226function GetCSSProperty(element, property)227{228 return element.getPropertyValue(property);229}230function SetCSSProperty(element, property)231{232 var document = GetCurrentDocument();233 var li = document.getElementById('CSSViewer_' + property);234 li.lastChild.innerHTML = " : " + element.getPropertyValue(property);235}236function SetCSSPropertyIf(element, property, condition)237{238 var document = GetCurrentDocument();239 var li = document.getElementById('CSSViewer_' + property);240 if (condition) {241 li.lastChild.innerHTML = " : " + element.getPropertyValue(property);242 li.style.display = 'block';243 return 1;244 }245 else {246 li.style.display = 'none';247 return 0;248 }249}250function SetCSSPropertyValue(element, property, value)251{252 var document = GetCurrentDocument();253 var li = document.getElementById('CSSViewer_' + property);254 li.lastChild.innerHTML = " : " + value;255 li.style.display = 'block';256}257function SetCSSPropertyValueIf(element, property, value, condition)258{259 var document = GetCurrentDocument();260 var li = document.getElementById('CSSViewer_' + property);261 if (condition) {262 li.lastChild.innerHTML = " : " + value;263 li.style.display = 'block';264 return 1;265 }266 else {267 li.style.display = 'none';268 return 0;269 }270}271function HideCSSProperty(property)272{273 var document = GetCurrentDocument();274 var li = document.getElementById('CSSViewer_' + property);275 li.style.display = 'none';276}277function HideCSSCategory(category)278{279 var document = GetCurrentDocument();280 var div = document.getElementById('CSSViewer_' + category);281 div.style.display = 'none';282}283function ShowCSSCategory(category)284{285 var document = GetCurrentDocument();286 var div = document.getElementById('CSSViewer_' + category);287 div.style.display = 'block';288}289function UpdatefontText(element)290{291 // Font292 SetCSSProperty(element, 'font-family');293 SetCSSProperty(element, 'font-size');294 SetCSSPropertyIf(element, 'font-weight' , GetCSSProperty(element, 'font-weight') != '400');295 SetCSSPropertyIf(element, 'font-variant' , GetCSSProperty(element, 'font-variant') != 'normal');296 SetCSSPropertyIf(element, 'font-style' , GetCSSProperty(element, 'font-style') != 'normal');297 298 // Text299 SetCSSPropertyIf(element, 'letter-spacing' , GetCSSProperty(element, 'letter-spacing') != 'normal');300 SetCSSPropertyIf(element, 'line-height' , GetCSSProperty(element, 'line-height') != 'normal');301 SetCSSPropertyIf(element, 'text-decoration', GetCSSProperty(element, 'text-decoration') != 'none');302 SetCSSPropertyIf(element, 'text-align' , GetCSSProperty(element, 'text-align') != 'start');303 SetCSSPropertyIf(element, 'text-indent' , GetCSSProperty(element, 'text-indent') != '0px');304 SetCSSPropertyIf(element, 'text-transform' , GetCSSProperty(element, 'text-transform') != 'none');305 SetCSSPropertyIf(element, 'vertical-align' , GetCSSProperty(element, 'vertical-align') != 'baseline');306 SetCSSPropertyIf(element, 'white-space' , GetCSSProperty(element, 'white-space') != 'normal');307 SetCSSPropertyIf(element, 'word-spacing' , GetCSSProperty(element, 'word-spacing') != 'normal');308}309function UpdateColorBg(element)310{311 // Color312 SetCSSPropertyValue(element, 'color', RGBToHex(GetCSSProperty(element, 'color')));313 // Background314 SetCSSPropertyValueIf(element, 'background-color', RGBToHex(GetCSSProperty(element, 'background-color')), GetCSSProperty(element, 'background-color') != 'transparent');315 SetCSSPropertyIf(element, 'background-attachment', GetCSSProperty(element, 'background-attachment') != 'scroll');316 SetCSSPropertyValueIf(element, 'background-image', GetFileName(GetCSSProperty(element, 'background-image')), GetCSSProperty(element, 'background-image') != 'none');317 SetCSSPropertyIf(element, 'background-position' , GetCSSProperty(element, 'background-position') != '');318 SetCSSPropertyIf(element, 'background-repeat' , GetCSSProperty(element, 'background-repeat') != 'repeat');319}320function UpdateBox(element)321{322 // Width/Height323 SetCSSPropertyIf(element, 'height', RemoveExtraFloat(GetCSSProperty(element, 'height')) != 'auto');324 SetCSSPropertyIf(element, 'width', RemoveExtraFloat(GetCSSProperty(element, 'width')) != 'auto');325 // Border326 var borderTop = RemoveExtraFloat(GetCSSProperty(element, 'border-top-width')) + ' ' + GetCSSProperty(element, 'border-top-style') + ' ' + RGBToHex(GetCSSProperty(element, 'border-top-color'));327 var borderBottom = RemoveExtraFloat(GetCSSProperty(element, 'border-bottom-width')) + ' ' + GetCSSProperty(element, 'border-bottom-style') + ' ' + RGBToHex(GetCSSProperty(element, 'border-bottom-color'));328 var borderRight = RemoveExtraFloat(GetCSSProperty(element, 'border-right-width')) + ' ' + GetCSSProperty(element, 'border-right-style') + ' ' + RGBToHex(GetCSSProperty(element, 'border-right-color'));329 var borderLeft = RemoveExtraFloat(GetCSSProperty(element, 'border-left-width')) + ' ' + GetCSSProperty(element, 'border-left-style') + ' ' + RGBToHex(GetCSSProperty(element, 'border-left-color'));330 if (borderTop == borderBottom && borderBottom == borderRight && borderRight == borderLeft && GetCSSProperty(element, 'border-top-style') != 'none') {331 SetCSSPropertyValue(element, 'border', borderTop);332 HideCSSProperty('border-top');333 HideCSSProperty('border-bottom');334 HideCSSProperty('border-right');335 HideCSSProperty('border-left');336 }337 else {338 SetCSSPropertyValueIf(element, 'border-top' , borderTop , GetCSSProperty(element, 'border-top-style') != 'none');339 SetCSSPropertyValueIf(element, 'border-bottom', borderBottom, GetCSSProperty(element, 'border-bottom-style') != 'none');340 SetCSSPropertyValueIf(element, 'border-right' , borderRight , GetCSSProperty(element, 'border-right-style') != 'none');341 SetCSSPropertyValueIf(element, 'border-left' , borderLeft , GetCSSProperty(element, 'border-left-style') != 'none');342 HideCSSProperty('border');343 }344 345 // Margin346 var marginTop = RemoveExtraFloat(GetCSSProperty(element, 'margin-top'));347 var marginBottom = RemoveExtraFloat(GetCSSProperty(element, 'margin-bottom'));348 var marginRight = RemoveExtraFloat(GetCSSProperty(element, 'margin-right'));349 var marginLeft = RemoveExtraFloat(GetCSSProperty(element, 'margin-left'));350 var margin = (marginTop == '0px' ? '0' : marginTop) + ' ' + (marginRight == '0px' ? '0' : marginRight) + ' ' + (marginBottom == '0px' ? '0' : marginBottom) + ' ' + (marginLeft == '0px' ? '0' : marginLeft);351 SetCSSPropertyValueIf(element, 'margin', margin, margin != '0 0 0 0');352 // padding353 var paddingTop = RemoveExtraFloat(GetCSSProperty(element, 'padding-top'));354 var paddingBottom = RemoveExtraFloat(GetCSSProperty(element, 'padding-bottom'));355 var paddingRight = RemoveExtraFloat(GetCSSProperty(element, 'padding-right'));356 var paddingLeft = RemoveExtraFloat(GetCSSProperty(element, 'padding-left'));357 var padding = (paddingTop == '0px' ? '0' : paddingTop) + ' ' + (paddingRight == '0px' ? '0' : paddingRight) + ' ' + (paddingBottom == '0px' ? '0' : paddingBottom) + ' ' + (paddingLeft == '0px' ? '0' : paddingLeft);358 SetCSSPropertyValueIf(element, 'padding', padding, padding != '0 0 0 0');359 // Max/Min Width/Height360 SetCSSPropertyIf(element, 'min-height', GetCSSProperty(element, 'min-height') != '0px');361 SetCSSPropertyIf(element, 'max-height', GetCSSProperty(element, 'max-height') != 'none');362 SetCSSPropertyIf(element, 'min-width' , GetCSSProperty(element, 'min-width') != '0px');363 SetCSSPropertyIf(element, 'max-width' , GetCSSProperty(element, 'max-width') != 'none');364}365function UpdatePositioning(element)366{367 SetCSSPropertyIf(element, 'position', GetCSSProperty(element, 'position') != 'static');368 SetCSSPropertyIf(element, 'top' , GetCSSProperty(element, 'top') != 'auto');369 SetCSSPropertyIf(element, 'bottom' , GetCSSProperty(element, 'bottom') != 'auto');370 SetCSSPropertyIf(element, 'right' , GetCSSProperty(element, 'right') != 'auto');371 SetCSSPropertyIf(element, 'left' , GetCSSProperty(element, 'left') != 'auto');372 SetCSSPropertyIf(element, 'float' , GetCSSProperty(element, 'float') != 'none');373 SetCSSProperty(element, 'display');374 SetCSSPropertyIf(element, 'clear' , GetCSSProperty(element, 'clear') != 'none');375 SetCSSPropertyIf(element, 'z-index' , GetCSSProperty(element, 'z-index') != 'auto');376}377function UpdateTable(element, tagName)378{379 if (IsInArray(CSSViewer_tableTagNames, tagName)) {380 var nbProperties = 0;381 nbProperties += SetCSSPropertyIf(element, 'border-collapse', GetCSSProperty(element, 'border-collapse') != 'separate');382 nbProperties += SetCSSPropertyIf(element, 'border-spacing' , GetCSSProperty(element, 'border-spacing') != '0px 0px');383 nbProperties += SetCSSPropertyIf(element, 'caption-side' , GetCSSProperty(element, 'caption-side') != 'top');384 nbProperties += SetCSSPropertyIf(element, 'empty-cells' , GetCSSProperty(element, 'empty-cells') != 'show');385 nbProperties += SetCSSPropertyIf(element, 'table-layout' , GetCSSProperty(element, 'table-layout') != 'auto');386 if (nbProperties > 0)387 ShowCSSCategory('pTable');388 else389 HideCSSCategory('pTable');390 }391 else {392 HideCSSCategory('pTable');393 }394}395function UpdateList(element, tagName)396{397 if (IsInArray(CSSViewer_listTagNames, tagName)) {398 ShowCSSCategory('pList');399 var listStyleImage = GetCSSProperty(element, 'list-style-image');400 if (listStyleImage == 'none') {401 SetCSSProperty(element, 'list-style-type');402 HideCSSProperty('list-style-image');403 }404 else {405 SetCSSPropertyValue(element, 'list-style-image', listStyleImage);406 HideCSSProperty('list-style-type');407 }408 SetCSSProperty(element, 'list-style-position');409 }410 else {411 HideCSSCategory('pList');412 }413}414function UpdateMisc(element)415{416 var nbProperties = 0;417 nbProperties += SetCSSPropertyIf(element, 'overflow' , GetCSSProperty(element, 'overflow') != 'visible');418 nbProperties += SetCSSPropertyIf(element, 'cursor' , GetCSSProperty(element, 'cursor') != 'auto');419 nbProperties += SetCSSPropertyIf(element, 'visibility', GetCSSProperty(element, 'visibility') != 'visible'); 420 if (nbProperties > 0)421 ShowCSSCategory('pMisc');422 else423 HideCSSCategory('pMisc');424}425function UpdateEffects(element)426{427 var nbProperties = 0;428 nbProperties += SetCSSPropertyIf(element, 'transform' , GetCSSProperty(element, 'transform') ); 429 nbProperties += SetCSSPropertyIf(element, 'transition' , GetCSSProperty(element, 'transition') ); 430 nbProperties += SetCSSPropertyIf(element, 'outline' , GetCSSProperty(element, 'outline') ); 431 nbProperties += SetCSSPropertyIf(element, 'outline-offset' , GetCSSProperty(element, 'outline-offset') != '0px'); 432 nbProperties += SetCSSPropertyIf(element, 'box-sizing' , GetCSSProperty(element, 'box-sizing') != 'content-box'); 433 nbProperties += SetCSSPropertyIf(element, 'resize' , GetCSSProperty(element, 'resize') != 'none'); 434 nbProperties += SetCSSPropertyIf(element, 'text-shadow' , GetCSSProperty(element, 'text-shadow') != 'none'); 435 nbProperties += SetCSSPropertyIf(element, 'text-overflow' , GetCSSProperty(element, 'text-overflow') != 'clip'); 436 nbProperties += SetCSSPropertyIf(element, 'word-wrap' , GetCSSProperty(element, 'word-wrap') != 'normal'); 437 nbProperties += SetCSSPropertyIf(element, 'box-shadow' , GetCSSProperty(element, 'box-shadow') != 'none'); 438 nbProperties += SetCSSPropertyIf(element, 'border-top-left-radius' , GetCSSProperty(element, 'border-top-left-radius') != '0px'); 439 nbProperties += SetCSSPropertyIf(element, 'border-top-right-radius' , GetCSSProperty(element, 'border-top-right-radius') != '0px'); 440 nbProperties += SetCSSPropertyIf(element, 'border-bottom-left-radius' , GetCSSProperty(element, 'border-bottom-left-radius') != '0px'); 441 nbProperties += SetCSSPropertyIf(element, 'border-bottom-right-radius', GetCSSProperty(element, 'border-bottom-right-radius') != '0px'); 442 if (nbProperties > 0)443 ShowCSSCategory('pEffect');444 else445 HideCSSCategory('pEffect');446}447/*448** Event Handlers449*/450function CSSViewerMouseOver(e)451{452 // Block453 var document = GetCurrentDocument();454 var block = document.getElementById('CSSViewer_block');455 if( ! block ){456 return;457 }458 block.firstChild.innerHTML = '&lt;' + this.tagName + '&gt;' + (this.id == '' ? '' : ' #' + this.id) + (this.className == '' ? '' : ' .' + this.className);459 // Outline element460 if (this.tagName != 'body') {461 this.style.outline = '1px dashed #f00';462 CSSViewer_current_element = this;463 }464 465 // Updating CSS properties466 var element = document.defaultView.getComputedStyle(this, null);467 UpdatefontText(element);468 UpdateColorBg(element);469 UpdateBox(element);470 UpdatePositioning(element);471 UpdateTable(element, this.tagName);472 UpdateList(element, this.tagName);473 UpdateMisc(element);474 UpdateEffects(element);475 CSSViewer_element = this;476 cssViewerRemoveElement("cssViewerInsertMessage");477 e.stopPropagation();478 // generate simple css definition479 CSSViewer_element_cssDefinition = this.tagName.toLowerCase() + (this.id == '' ? '' : ' #' + this.id) + (this.className == '' ? '' : ' .' + this.className) + " {\n";480 CSSViewer_element_cssDefinition += "\t/* Font & Text */\n"; 481 for (var i = 0; i < CSSViewer_pFont.length; i++)482 CSSViewer_element_cssDefinition += "\t" + CSSViewer_pFont[i] + ': ' + element.getPropertyValue( CSSViewer_pFont[i] ) + ";\n";483 CSSViewer_element_cssDefinition += "\n\t/* Color & Background */\n";484 for (var i = 0; i < CSSViewer_pColorBg.length; i++)485 CSSViewer_element_cssDefinition += "\t" + CSSViewer_pColorBg[i] + ': ' + element.getPropertyValue( CSSViewer_pColorBg[i] ) + ";\n";486 CSSViewer_element_cssDefinition += "\n\t/* Box */\n";487 for (var i = 0; i < CSSViewer_pBox.length; i++)488 CSSViewer_element_cssDefinition += "\t" + CSSViewer_pBox[i] + ': ' + element.getPropertyValue( CSSViewer_pBox[i] ) + ";\n";489 CSSViewer_element_cssDefinition += "\n\t/* Positioning */\n";490 for (var i = 0; i < CSSViewer_pPositioning.length; i++)491 CSSViewer_element_cssDefinition += "\t" + CSSViewer_pPositioning[i] + ': ' + element.getPropertyValue( CSSViewer_pPositioning[i] ) + ";\n";492 CSSViewer_element_cssDefinition += "\n\t/* List */\n";493 for (var i = 0; i < CSSViewer_pList.length; i++)494 CSSViewer_element_cssDefinition += "\t" + CSSViewer_pList[i] + ': ' + element.getPropertyValue( CSSViewer_pList[i] ) + ";\n";495 CSSViewer_element_cssDefinition += "\n\t/* Table */\n";496 for (var i = 0; i < CSSViewer_pTable.length; i++)497 CSSViewer_element_cssDefinition += "\t" + CSSViewer_pTable[i] + ': ' + element.getPropertyValue( CSSViewer_pTable[i] ) + ";\n";498 CSSViewer_element_cssDefinition += "\n\t/* Miscellaneous */\n";499 for (var i = 0; i < CSSViewer_pMisc.length; i++)500 CSSViewer_element_cssDefinition += "\t" + CSSViewer_pMisc[i] + ': ' + element.getPropertyValue( CSSViewer_pMisc[i] ) + ";\n";501 CSSViewer_element_cssDefinition += "\n\t/* Effects */\n"; 502 for (var i = 0; i < CSSViewer_pEffect.length; i++)503 CSSViewer_element_cssDefinition += "\t" + CSSViewer_pEffect[i] + ': ' + element.getPropertyValue( CSSViewer_pEffect[i] ) + ";\n";504 CSSViewer_element_cssDefinition += "}";505 // console.log( element.cssText ); //< debug the hovered el css506}507function CSSViewerMouseOut(e)508{509 this.style.outline = '';510 e.stopPropagation();511}512function CSSViewerMouseMove(e)513{514 var document = GetCurrentDocument();515 var block = document.getElementById('CSSViewer_block');516 if( ! block ){517 return;518 }519 block.style.display = 'block';520 521 var pageWidth = window.innerWidth;522 var pageHeight = window.innerHeight;523 var blockWidth = 332;524 var blockHeight = document.defaultView.getComputedStyle(block, null).getPropertyValue('height');525 blockHeight = blockHeight.substr(0, blockHeight.length - 2) * 1;526 if ((e.pageX + blockWidth) > pageWidth) {527 if ((e.pageX - blockWidth - 10) > 0)528 block.style.left = e.pageX - blockWidth - 40 + 'px';529 else530 block.style.left = 0 + 'px';531 }532 else533 block.style.left = (e.pageX + 20) + 'px';534 if ((e.pageY + blockHeight) > pageHeight) {535 if ((e.pageY - blockHeight - 10) > 0)536 block.style.top = e.pageY - blockHeight - 20 + 'px';537 else538 block.style.top = 0 + 'px';539 }540 else541 block.style.top = (e.pageY + 20) + 'px';542 // adapt block top to screen offset543 inView = CSSViewerIsElementInViewport(block);544 if( ! inView )545 block.style.top = ( window.pageYOffset + 20 ) + 'px';546 e.stopPropagation();547}548// http://stackoverflow.com/a/7557433549function CSSViewerIsElementInViewport(el) {550 var rect = el.getBoundingClientRect();551 return (552 rect.top >= 0 &&553 rect.left >= 0 &&554 rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&555 rect.right <= (window.innerWidth || document.documentElement.clientWidth)556 );557}558/*559* CSSViewer Class560*/561function CSSViewer()562{563 // Create a block to display informations564 this.CreateBlock = function() {565 var document = GetCurrentDocument();566 var block;567 568 if (document) {569 // Create a div block570 block = document.createElement('div');571 block.id = 'CSSViewer_block';572 573 // Insert a title for CSS selector574 var header = document.createElement('h1');575 header.appendChild(document.createTextNode(''));576 block.appendChild(header);577 578 // Insert all properties579 var center = document.createElement('div');580 center.id = 'CSSViewer_center';581 for (var cat in CSSViewer_categories) {582 var div = document.createElement('div');583 div.id = 'CSSViewer_' + cat;584 div.className = 'CSSViewer_category';585 var h2 = document.createElement('h2');586 h2.appendChild(document.createTextNode(CSSViewer_categoriesTitle[cat]));587 var ul = document.createElement('ul');588 var properties = CSSViewer_categories[cat];589 for (var i = 0; i < properties.length; i++) {590 var li = document.createElement('li');591 li.id = 'CSSViewer_' + properties[i];592 var spanName = document.createElement('span');593 spanName.className = 'CSSViewer_property';594 var spanValue = document.createElement('span');595 spanName.appendChild(document.createTextNode(properties[i]));596 li.appendChild(spanName);597 li.appendChild(spanValue);598 ul.appendChild(li);599 }600 div.appendChild(h2);601 div.appendChild(ul);602 center.appendChild(div);603 }604 block.appendChild(center);605 // Insert a footer606 var footer = document.createElement('div');607 footer.id = 'CSSViewer_footer';608 //< 609 footer.appendChild( document.createTextNode('CSSViewer 1.1. Keys: [F] Un/Freeze. [C] CSS. [ESC] Close.') ); 610 block.appendChild(footer);611 }612 613 cssViewerInsertMessage( "CSSViewer loaded! Hover any element you want to inspect in the page." );614 return block;615 }616 617 // Get all elements within the given element618 this.GetAllElements = function(element)619 {620 var elements = new Array();621 if (element && element.hasChildNodes()) {622 elements.push(element);623 var childs = element.childNodes;624 for (var i = 0; i < childs.length; i++) {625 if (childs[i].hasChildNodes()) {626 elements = elements.concat(this.GetAllElements(childs[i]));627 }628 else if (childs[i].nodeType == 1) {629 elements.push(childs[i]);630 }631 }632 }633 return elements;634 }635 636 // Add bool for knowing all elements having event listeners or not637 this.haveEventListeners = false;638 // Add event listeners for all elements in the current document639 this.AddEventListeners = function()640 {641 var document = GetCurrentDocument();642 var elements = this.GetAllElements(document.body);643 for (var i = 0; i < elements.length; i++) {644 elements[i].addEventListener("mouseover", CSSViewerMouseOver, false);645 elements[i].addEventListener("mouseout", CSSViewerMouseOut, false);646 elements[i].addEventListener("mousemove", CSSViewerMouseMove, false);647 } 648 this.haveEventListeners = true;649 }650 651 // Remove event listeners for all elements in the current document652 this.RemoveEventListeners = function()653 {654 var document = GetCurrentDocument();655 var elements = this.GetAllElements(document.body);656 for (var i = 0; i < elements.length; i++){657 elements[i].removeEventListener("mouseover", CSSViewerMouseOver, false);658 elements[i].removeEventListener("mouseout", CSSViewerMouseOut, false);659 elements[i].removeEventListener("mousemove", CSSViewerMouseMove, false);660 } 661 this.haveEventListeners = false;662 }663 // Set the title of the block664 this.SetTitle = function()665 {}666 667 // Add a stylesheet to the current document668 this.AddCSS = function(cssFile)669 {670 var document = GetCurrentDocument();671 var link = document.createElement("link");672 link.setAttribute("href", cssFile);673 link.setAttribute("rel", "stylesheet");674 link.setAttribute("type", "text/css");675 var heads = document.getElementsByTagName("head");676 if(heads.length > 0)677 heads[0].appendChild(link);678 else679 document.documentElement.appendChild(link);680 }681 682 this.RemoveCSS = function(cssFile)683 {684 var document = GetCurrentDocument();685 var links = document.getElementsByTagName('link');686 for (var i = 0; i < links.length; i++) {687 if (links[i].rel == "stylesheet" && links[i].href == cssFile) {688 var heads = document.getElementsByTagName("head");689 if(heads.length > 0) {690 heads[0].removeChild(links[i]);691 }692 return;693 }694 }695 }696}697/*698* Check if CSSViewer is enabled699*/700CSSViewer.prototype.IsEnabled = function()701{702 var document = GetCurrentDocument();703 if (document.getElementById('CSSViewer_block')) {704 return true;705 }706 return false;707}708/*709* Enable CSSViewer710*/711CSSViewer.prototype.Enable = function()712{713 var document = GetCurrentDocument();714 var block = document.getElementById('CSSViewer_block');715 if (!block){716 block = this.CreateBlock();717 document.body.appendChild(block);718 this.AddEventListeners();719 return true;720 }721 return false;722}723/*724* Disable CSSViewer725*/726CSSViewer.prototype.Disable = function()727{728 var document = GetCurrentDocument();729 var block = document.getElementById('CSSViewer_block');730 if (block) {731 document.body.removeChild(block); 732 this.RemoveEventListeners();733 return true;734 }735 return false;736}737/*738* Freeze CSSViewer739*/740CSSViewer.prototype.Freeze = function()741{742 var document = GetCurrentDocument();743 var block = document.getElementById('CSSViewer_block');744 if ( block && this.haveEventListeners ) {745 this.RemoveEventListeners();746 return true;747 }748 return false;749}750/*751* Unfreeze CSSViewer752*/753CSSViewer.prototype.Unfreeze = function()754{755 var document = GetCurrentDocument();756 var block = document.getElementById('CSSViewer_block');757 if ( block && !this.haveEventListeners ) {758 // Remove the red outline759 CSSViewer_current_element.style.outline = '';760 this.AddEventListeners();761 return true;762 }763 return false;764}765/*766* Display the notification message767*/768function cssViewerInsertMessage( msg )769{770 var oNewP = document.createElement("p");771 var oText = document.createTextNode( msg );772 oNewP.appendChild(oText);773 oNewP.id = 'cssViewerInsertMessage';774 oNewP.style.backgroundColor = '#b40000';775 oNewP.style.color = '#ffffff';776 oNewP.style.position = "absolute";777 oNewP.style.top = '10px';778 oNewP.style.left = '10px';779 oNewP.style.zIndex = '100';780 oNewP.style.padding = '3px';781 // https://github.com/miled/cssviewer/issues/5782 // https://github.com/miled/cssviewer/issues/6783 // var beforeMe = document.getElementsByTagName("body");784 // document.body.insertBefore( oNewP, beforeMe[0] );785 // https://github.com/zchee/cssviewer/commit/dad107d27e94aabeb6e11b935ad28c4ff251f895786 document.body.appendChild(oNewP);787}788/*789* Removes and element from the dom, used to remove the notification message790*/791function cssViewerRemoveElement(divid)792{ 793 var n = document.getElementById(divid);794 if(n){795 document.body.removeChild(n); 796 }797}798/*799* Copy current element CSS to Firefox console800*/801function cssViewerCopyCssToConsole(type)802{ 803 if( 'el' == type ) return console.log( CSSViewer_element );804 if( 'id' == type ) return console.log( CSSViewer_element.id );805 if( 'tagName' == type ) return console.log( CSSViewer_element.tagName );806 if( 'className' == type ) return console.log( CSSViewer_element.className );807 if( 'style' == type ) return console.log( CSSViewer_element.style ); 808 if( 'cssText' == type ) return console.log( document.defaultView.getComputedStyle(CSSViewer_element, null).cssText );809 if( 'getComputedStyle' == type ) return console.log( document.defaultView.getComputedStyle(CSSViewer_element, null) );810 if( 'simpleCssDefinition' == type ) return console.log( CSSViewer_element_cssDefinition );811}812/*813* Close css viewer on clicking 'esc' key814* Freeze css viewer on clicking 'f' key815*/816function CssViewerKeyMap(e) {817 if( ! cssViewer.IsEnabled() )818 return;819 // ESC: Close the css viewer if the cssViewer is enabled.820 if ( e.keyCode === 27 ){821 // Remove the red outline822 CSSViewer_current_element.style.outline = '';823 cssViewer.Disable();824 }825 826 if( e.altKey || e.ctrlKey )827 return;828 // f: Freeze or Unfreeze the css viewer if the cssViewer is enabled829 if ( e.keyCode === 70 ){830 if ( cssViewer.haveEventListeners ){831 cssViewer.Freeze();832 }833 else {834 cssViewer.Unfreeze();835 }836 }837 // c: Show code css for selected element. 838 // window.prompt should suffice for now.839 if ( e.keyCode === 67 ){840 window.prompt("Simple Css Definition :\n\nYou may copy the code below then hit escape to continue.", CSSViewer_element_cssDefinition);841 }842}843/*844* CSSViewer entry-point845*/846cssViewer = new CSSViewer();847if ( cssViewer.IsEnabled() ){848 cssViewer.Disable(); 849}850else{851 cssViewer.Enable(); 852}853// Set event handler for the CssViewer ...

Full Screen

Full Screen

readium.page.js

Source:readium.page.js Github

copy

Full Screen

...52 function() {53 let contentIframeElement = $( Selectors.epubContentIframe );54 browser.switchToFrame( contentIframeElement );55 let bodyElement = $( 'body' );56 let backgroundColor = bodyElement.getCSSProperty( 'background-color' ).parsed.hex;57 let color = bodyElement.getCSSProperty( 'color' ).parsed.hex;58 let columns;59 if ( this.browserName === 'chrome' ) {60 columns = browser.execute( function() {61 return document.querySelector( 'html' ).style.columns;62 } );63 } else if ( this.browserName === 'firefox' ) {64 columns = $( 'html' ).getCSSProperty( '-moz-column-count' ).value65 } else {66 // Should never get here.67 }68 // Convert to string. Sometimes the value is 2, which is not === '2',69 // and so fails waitForColumnsToBeEqualTo( '2' ).70 columns = columns.toString();71 let fontSize = browser.execute( function() {72 return document.querySelector( 'html' ).style.fontSize;73 } );74 let htmlWidth = browser.execute( function() {75 return document.querySelector( 'html' ).style.width;76 } );77 let maxHeight = $( 'html' ).getCSSProperty( 'max-height' ).value;78 browser.switchToParentFrame();79 return {80 contentIframeElement,81 backgroundColor,82 color,83 columns,84 fontSize,85 htmlWidth,86 maxHeight,87 };88 }89 },90 // This is only used in Auto and Document scroll modes. Continuous scroll mode91 // uses a view that has two <iframe> elements. See the ReadiumPage.scrolledContentFrame92 // property.93 isExistingInContentIframe: { value:94 function( selector, matchText ) {95 // Element with text selectors (ex. "span=Spreadable Media") and XPath selectors96 // (ex. //span[normalize-space() = "Spreadable Media"]) do not seem to be working97 // on our test EPUB. This appears to be because the chapter files98 // are XHTML, with .xthml extensions, which seems to throw Selenium99 // into "XML mode", where namespace prefixes are necessary for matching100 // tags using XPath:101 // http://stackoverflow.com/questions/32232299/selenium-cannot-find-xpath-when-xmlns-attribute-is-included102 //103 // Selenium output shows that WebdriverIO is using104 //105 // By.XPath '//span[normalize-space() = "Spreadable Media"]'106 //107 // ...which fails, whereas selector108 //109 // '//*[normalize-space() = "Spreadable Media"]'110 //111 // ...succeeds.112 //113 // Tried using namespace specified in the xhtml file:114 //115 // '//span[namespace-uri()="http://www.w3.org/1999/xhtml"][normalize-space() = "Spreadable Media"]'116 //117 // ...but without success.118 //119 // Simply changing the file extension from .xhtml to .html makes this120 // bug go away. We don't have this option for our EPUBs, though.121 //122 // The workaround we use here is to overload this method with an123 // optional matchText param. When matchText is specified, the selector124 // argument is understood to be a selector for fetching an array of125 // tags whose elements will then be checked against matchText.126 // Otherwise, selector will be understood to be a specification for127 // fetching a single element only based on text.128 //129 // Example: use `readium.isExistingInContentIframe( 'span', 'Spreadable Media' )`130 // instead of `readium.isExistingInContentIframe( 'span=Spreadable Media' )`131 let isExistingResult;132 let contentIframeElement = $( Selectors.epubContentIframe );133 browser.switchToFrame( contentIframeElement );134 if ( matchText ) {135 // Make race condition less likely.136 browser.waitUntil(137 function() {138 return $$( selector ).length > 0;139 }140 );141 const elements = $$( selector );142 const numElements = elements.length;143 for ( let i = 0; i < numElements; i++ ) {144 if ( elements[ i ].getText().includes( matchText ) ) {145 isExistingResult = true;146 break;147 }148 }149 } else {150 // Make race condition less likely.151 $( selector ).waitForDisplayed();152 isExistingResult = ( $( selector ).getText() !== '' );153 }154 browser.switchToParentFrame();155 return isExistingResult;156 }157 },158 isFullscreen : { get:159 function() {160 let fullscreenEnabled = browser.execute( function() {161 if ( document.mozFullScreenElement || document.webkitFullscreenElement ) {162 return true;163 } else {164 return false;165 }166 } );167 return fullscreenEnabled;168 }169 },170 navbar: { get:171 function() {172 let element = $( Selectors.navbar.main );173 let navbarCss = getNavbarCss( element );174 let navbarRight = getNavbarRightCss();175 let leftSideVisibleButtons = getVisibleButtons( $$( Selectors.navbar.leftSideButtons ) );176 let rightSideVisibleButtons = getVisibleButtons( $$( Selectors.navbar.rightSideButtons ) );177 let navbar = {178 element,179 hover : () => { element.moveTo(); },180 // Currently element.isDisplayed() does not appear to work correctly181 // with Firefox. For details, see https://jira.nyu.edu/jira/browse/NYUP-647?focusedCommentId=117270&page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel#comment-117270182 isDisplayed : this.browserName === 'firefox' ?183 element.getCSSProperty( 'opacity' ).value !== 0 :184 element.isDisplayed(),185 leftSideVisibleButtons,186 navbarRight,187 selector : Selectors.navbar.main,188 rightSideVisibleButtons,189 };190 Object.assign( navbar, navbarCss );191 return navbar;192 }193 },194 open: { value: function( path ) {195 Page.open.call( this, path );196 $( Selectors.epubContentIframe ).waitForExist();197 } },198 readingArea: { get:199 function() {200 let element = $( Selectors.readingArea );201 return {202 top: element.getCSSProperty( 'top' ).value203 };204 }205 },206 saveSettings : { value :207 function() {208 clickElement( Selectors.settings.save );209 }210 },211 selectSettingArabianNights : { value :212 function() {213 clickElement( Selectors.settings.style.textAndBackground.arabianNights );214 }215 },216 selectSettingContinuousScrollMode: { value :217 function() {218 clickElement( Selectors.settings.layout.scrollMode.continuous );219 }220 },221 selectSettingDocumentScrollMode: { value :222 function() {223 clickElement( Selectors.settings.layout.scrollMode.document );224 }225 },226 selectSettingSinglePage: { value :227 function() {228 clickElement( Selectors.settings.layout.displayFormat.singlePage );229 }230 },231 selectSettingDoublePage: { value :232 function() {233 clickElement( Selectors.settings.layout.displayFormat.doublePage );234 }235 },236 selectSettingsLayoutTab : { value :237 function() {238 clickElement( Selectors.settings.layout.tab );239 }240 },241 selectSettingsStyleTab : { value :242 function() {243 clickElement( Selectors.settings.style.tab );244 }245 },246 setFontSizeSliderValue: { value:247 function( value ) {248 setSliderValue( Selectors.settings.style.fontSize, value );249 }250 },251 setPageWidthSliderValue: { value:252 function( value ) {253 setSliderValue( Selectors.settings.layout.pageWidth, value );254 }255 },256 setWindowSize : { value :257 function( size) {258 // size must be an object with width and height fields:259 // {260 // width : 500,261 // height : 500,262 // }263 browser.setWindowSize( size.width, size.height );264 }265 },266 scrolledContentFrame: { get:267 function() {268 let scrolledContentFrameElement = $( Selectors.scrolledContentFrame );269 let overflowY = scrolledContentFrameElement.getCSSProperty( 'overflow-y' ).value;270 return {271 scrolledContentFrameElement,272 overflowY,273 };274 }275 },276 stylePreview: { get:277 function() {278 $( Selectors.settings.style.preview ).waitForDisplayed();279 let element = $( Selectors.settings.style.preview );280 let backgroundColor = element.getCSSProperty( 'background-color' ).parsed.hex;281 let color = element.getCSSProperty( 'color' ).parsed.hex;282 let fontSize = element.getCSSProperty( 'font-size' ).value;283 return {284 element,285 backgroundColor,286 color,287 fontSize,288 }289 }290 },291 toc: { get:292 function() {293 let element = $( Selectors.toc.body );294 return {295 element,296 display: element.getCSSProperty( 'display' ).value,297 }298 }299 },300 toggleFullscreen : { value :301 function() {302 // This does not seem to work with Firefox (geckodriver) right now.303 // Firefox goes fullscreen but all-black, pauses, then shrinks back304 // to the original size and view.305 clickElement( Selectors.fullscreen );306 }307 },308 toggleSettings : { value :309 function() {310 clickElement( Selectors.settings.toggle );311 }312 },313 toggleToc : { value :314 function() {315 clickElement( Selectors.toc.toggle );316 }317 },318 vh: { get:319 function() {320 let contentIframeElement = $( Selectors.epubContentIframe );321 browser.switchToFrame( contentIframeElement );322 const htmlHeight = parseInt( $( 'html' ).getCSSProperty( 'height' ).value );323 const vh = htmlHeight / 100;324 browser.switchToParentFrame();325 return vh;326 }327 },328 // On fast machines, sometimes need to pause a bit to allow settings change329 // of columns to take effect.330 waitForColumnsToBeEqualTo : { value :331 function( columnsValue ) {332 let that = this;333 browser.waitUntil(334 function() {335 return that.epubContentIframe.columns === columnsValue;336 },337 1000338 );339 }340 },341 waitForExistInContentIframe : { value :342 function( selector, matchText ) {343 let that = this;344 browser.waitUntil(345 function() {346 return that.isExistingInContentIframe( selector, matchText );347 }348 );349 }350 },351 waitForTocToBeVisible : { value :352 function() {353 return $( Selectors.toc.body ).waitForDisplayed();354 }355 }356} );357function clickElement( selector ) {358 $( selector ).waitForDisplayed();359 $( selector ).click();360}361function getBookCoverImage( frameElement, bookCoverImageType ) {362 let bookCoverImage = {};363 browser.switchToFrame( frameElement );364 // Book covers can be either <svg> are <img>.365 // We use different fixes for each.366 if ( bookCoverImageType === BOOK_COVER_IMAGE_TYPE_SVG ) {367 bookCoverImage.maxHeight = $( 'svg' )368 .getCSSProperty( 'max-height' )369 .value;370 } else if ( bookCoverImageType === BOOK_COVER_IMAGE_TYPE_IMG ) {371 let bookCoverImageElement = $( '.cover img' );372 if ( bookCoverImageElement ) {373 bookCoverImage.height = bookCoverImageElement.getCSSProperty( 'height' ).value;374 bookCoverImage.maxHeight = bookCoverImageElement.getCSSProperty( 'max-height' ).value;375 bookCoverImage.maxWidth = bookCoverImageElement.getCSSProperty( 'max-width' ).value;376 bookCoverImage.width = bookCoverImageElement.getCSSProperty( 'width' ).value;377 }378 } else {379 console.log( 'Should never get here.' );380 }381 browser.switchToParentFrame();382 return bookCoverImage;383}384function getNavbarCss( navbarElement ) {385 let backgroundColor = navbarElement.getCSSProperty( 'background-color' ).parsed.hex;386 // Build the convenient testing string.387 // Need this for the dimensional/spatial information in (for example) "rgb(51,51,51)0px1px5px0px"388 let boxShadowUnparsedValue = navbarElement.getCSSProperty( 'box-shadow' ).value;389 let boxShadowParseOffsetAndRadiusRegex =390 /^rgb\(\d{1,3},\d{1,3},\d{1,3}\)(\d+px)(\d+px)(\d+px)\d+px$/;391 let boxShadowOffsetAndRadiusParts = boxShadowParseOffsetAndRadiusRegex392 .exec( boxShadowUnparsedValue );393 let boxShadow = boxShadowOffsetAndRadiusParts[ 1 ] +394 ' ' +395 boxShadowOffsetAndRadiusParts[ 2 ] +396 ' ' +397 boxShadowOffsetAndRadiusParts[ 3 ] +398 ' ' +399 navbarElement.getCSSProperty( 'box-shadow' ).parsed.hex.substring( 0, 4 );400 // Our plugin sets "border-radius", but Firefox currently uses the broken-out401 // properties.402 let borderBottomLeftRadius = navbarElement.getCSSProperty( 'border-bottom-left-radius' ).value;403 let borderBottomRightRadius = navbarElement.getCSSProperty( 'border-bottom-right-radius' ).value;404 let borderTopLeftRadius = navbarElement.getCSSProperty( 'border-top-left-radius' ).value;405 let borderTopRightRadius = navbarElement.getCSSProperty( 'border-top-right-radius' ).value;406 let minHeight = navbarElement.getCSSProperty( 'min-height' ).value;407 let marginBottom = navbarElement.getCSSProperty( 'margin-bottom' ).value;408 return {409 backgroundColor,410 boxShadow,411 borderBottomLeftRadius,412 borderBottomRightRadius,413 borderTopLeftRadius,414 borderTopRightRadius,415 minHeight,416 marginBottom,417 }418}419function getNavbarRightCss() {420 let navbarRight = $( '.navbar-right' );421 let backgroundColor = navbarRight.getCSSProperty( 'background-color' ).parsed.hex;422 let height = navbarRight.getCSSProperty( 'height' ).value;423 // Our plugin sets "margin", but Firefox currently uses the broken-out424 // properties.425 let marginBottom = navbarRight.getCSSProperty( 'margin-bottom' ).value;426 let marginLeft = navbarRight.getCSSProperty( 'margin-left' ).value;427 let marginRight = navbarRight.getCSSProperty( 'margin-right' ).value;428 let marginTop = navbarRight.getCSSProperty( 'margin-top' ).value;429 let minHeight = navbarRight.getCSSProperty( 'min-height' ).value;430 let overflow = navbarRight.getCSSProperty( 'overflow' ).value;431 return {432 backgroundColor,433 height,434 marginBottom,435 marginLeft,436 marginRight,437 marginTop,438 minHeight,439 overflow,440 }441}442function getVisibleButtons( elements ) {443 let buttons = {};444 elements.forEach( function( element ) {445 if (446 element.getCSSProperty( 'visibility' ).value != 'hidden' &&447 element.getCSSProperty( 'display' ).value != 'none'448 ) {449 buttons[ element.getAttribute( 'id' ) ] = {450 css: getNavbarButtonCss( element ),451 };452 }453 } );454 return buttons;455}456function getNavbarButtonCss( button ) {457 return {458 backgroundColor : button.getCSSProperty( 'background-color' ).parsed.hex,459 backgroundPosition : button.getCSSProperty( 'background-position' ).value,460 backgroundRepeat : button.getCSSProperty( 'background-repeat' ).value,461 color : button.getCSSProperty( 'color' ).parsed.hex,462 fontSize : button.getCSSProperty( 'font-size' ).value,463 height : button.getCSSProperty( 'height' ).value,464 width : button.getCSSProperty( 'width' ).value,465 }466}467function setSliderValue( sliderSelector, value ) {468 $( sliderSelector ).waitForDisplayed();469 browser.execute( function( selector, newValue ) {470 $( selector ).val( newValue );471 // Trigger change event so that the preview window text changes.472 $( selector ).change();473 }, sliderSelector, value );474}475ReadiumPage.BOOK_COVER_IMAGE_TYPE_SVG = BOOK_COVER_IMAGE_TYPE_SVG;476ReadiumPage.BOOK_COVER_IMAGE_TYPE_IMG = BOOK_COVER_IMAGE_TYPE_IMG;...

Full Screen

Full Screen

CellPhoneNumberDesign.js

Source:CellPhoneNumberDesign.js Github

copy

Full Screen

...28 const actualInputFieldPhone = $(inputFieldPhone).isDisplayed();29 expect(actualInputFieldPhone).to.be.true;30 });31 it('should check border-color', () => {32 const actualBorder = $(inputFieldPhone).getCSSProperty('border-top-color').parsed.hex;33 expect(actualBorder).to.be.equal(expectedBorder);34 });35});36describe('Register Page - Cell Phone Number input field when user enters first symbol - Design', () => {37 before(() => {38 browser.url(url.register);39 $(inputFieldPhone).setValue(firstSymbol);40 browser.pause(400);41 });42 it('should check font-color', () => {43 const actualFontColor = $(inputFieldPhone).getCSSProperty('color').parsed.hex;44 expect(actualFontColor).to.be.equal(expectedFontColor);45 });46 it('should check focus border-color', () => {47 const actualFocusBorderColor = $(inputFieldPhone).getCSSProperty('border-color').parsed.hex;48 expect(actualFocusBorderColor).to.be.equal(expectedFocusBorderColor);49 });50 it('should check focus highlight color', () => {51 const actualFocusHighlightColor = $(inputFieldPhone).getCSSProperty('box-shadow').parsed.hex;52 browser.pause(500);53 expect(actualFocusHighlightColor).to.be.equal(expectedFocusHighlightColor);54 });55 it('should check background-color', () => {56 const actualBackgroundColor = $(inputFieldPhone).getCSSProperty('background-color').parsed.hex;57 expect(actualBackgroundColor).to.be.equal(expectedBackgroundColor);58 });59 it('should check text-alignment', () => {60 const actualTextAlign = $(inputFieldPhone).getCSSProperty('text-align').value;61 expect(actualTextAlign).to.be.equal(expectedTextAlign);62 });63 it('should check font-family', () => {64 const actualfontFamily = $(inputFieldPhone).getCSSProperty('font-family').parsed.string;65 expect(actualfontFamily).to.be.equal(expectedFontFamily);66 });67 it('should check font-weight', () => {68 const actualWeightObj = $(inputFieldPhone).getCSSProperty('font-weight');69 const actualWeight = Object.values(actualWeightObj)[1];70 expect(actualWeight).to.be.equal(expectedWeight);71 });72});73describe('Register Page - Cell Phone Number input field when the number is validated - Design', () => {74 it('should check border-color', () => {75 browser.url(url.register);76 $(inputFieldPhone).setValue(user.admin.phone);77 browser.keys('Tab');78 browser.pause(500);79 const actualBorderColorValid = $(inputFieldPhone).getCSSProperty('border-color').parsed.hex;80 expect(actualBorderColorValid).to.be.equal(expectedBorderColorValid);81 });82});83describe('Register Page - Cell phone number Label - Design', () => {84 before(() => {85 browser.url(url.register);86 });87 it('should check that the label is displayed', () => {88 expect($(label).isDisplayed()).to.be.true;89 });90 it('should check font-family', () => {91 const actualLabelfontFamily = $(label).getCSSProperty('font-family').parsed.string;92 expect(actualLabelfontFamily).to.be.equal(expectedFontFamily);93 });94 it('should check font-size', () => {95 const labelSizeObj = $(label).getCSSProperty('font-size').value;96 expect(labelSizeObj).to.be.equal(expectedLabelSize);97 });98 it('should check font-color', () => {99 const actualLabelColor = $(label).getCSSProperty('color').parsed.hex;100 expect(actualLabelColor).to.be.equal(expectLabelColor);101 });102 it('should check font-weight', () => {103 const actualLabelWeight = $(label).getCSSProperty('font-weight').value;104 expect(actualLabelWeight).to.be.equal(expectedWeight);105 });106 it('should check text-alignment', () => {107 const actualLabelAlign = $(label).getCSSProperty('text-align').value;108 expect(actualLabelAlign).to.be.equal(expectedAlign);109 });110});111describe('Register Page - Cell phone number description text - Design', () => {112 before(() => {113 browser.url(url.register);114 });115 it('should check that the text is displayed', () => {116 expect($(descText).isDisplayed()).to.be.true;117 });118 it('should check that the text is “Format 17770005511 or 380653332244”', () => {119 const actualDescText = $(descText).getText();120 expect(actualDescText).to.be.equal(expectedDescText);121 });122 it('should check font-family', () => {123 const actualDescTextFontFamily = $(descText).getCSSProperty('font-family').parsed.string;124 expect(actualDescTextFontFamily).to.be.equal(expectedFontFamily);125 });126 it('should check font-size', () => {127 const actualDescTextSize = $(descText).getCSSProperty('font-size').value;128 expect(actualDescTextSize).to.be.equal(expectedDescTextSize);129 });130 it('should check font-color', () => {131 const actualDescTextColor = $(descText).getCSSProperty('color').parsed.hex;132 const expectedDescTextColor = '#6c757d';133 expect(actualDescTextColor).to.be.equal(expectedDescTextColor);134 });135 it('should check font-weight', () => {136 const actualDescTextWeight = $(descText).getCSSProperty('font-weight').value;137 expect(actualDescTextWeight).to.be.equal(expectedWeight);138 });139 it('should check text-alignment', () => {140 const actualDescTextAlign = $(descText).getCSSProperty('text-align').value;141 expect(actualDescTextAlign).to.be.equal(expectedAlign);142 });...

Full Screen

Full Screen

homePageHeaderDesign.js

Source:homePageHeaderDesign.js Github

copy

Full Screen

...22 const expectedSiteName = 'Progress Monitor';23 expect(siteNameActual).to.equal(expectedSiteName);24 });25 it('verify that application name is left-aligned', () => {26 const actualAlignment = $(siteName).getCSSProperty('text-align').parsed.string;27 const expectAlignment = 'left';28 expect(actualAlignment).to.equal(expectAlignment);29 });30 it('application name should have correct font-size', () => {31 const actualSize = $(siteName).getCSSProperty('font-size').parsed.string;32 const expectFontSize = '20px';33 expect(actualSize).to.equal(expectFontSize);34 });35 it('application name should have correct color', () => {36 const actualColor = $(siteName).getCSSProperty('color').parsed.hex;37 const expectColor = '#000000';38 expect(actualColor).to.equal(expectColor);39 });40 it('application name should have correct font-weight', () => {41 const actualWeight = $(siteName).getCSSProperty('font-weight').parsed.string;42 const expectFontWeight = '500';43 expect(actualWeight).to.equal(expectFontWeight);44 });45 it('application name should have correct font-family ', function() {46 const font = $(siteName).getCSSProperty('font-family').parsed.string;47 expect(font).to.equal(48 '"sf pro display", "sf pro icons", "helvetica neue", helvetica, arial, sans-serif',49 );50 });51 it('verify that navigation-bar is displayed', function() {52 const navigationBarIsDisplayed = $(navBar).isDisplayed();53 expect(navigationBarIsDisplayed).to.be.true;54 });55 it('verify that navigation-bar has correct alignment', function() {56 const navigationBarAlignment = $(navBar).getCSSProperty('align-items').parsed.string;57 const expectAlign = 'center';58 expect(navigationBarAlignment).to.equal(expectAlign);59 });60 it('verify that navigation bar contains Login button', () => {61 const actual = $(loginButton).getText();62 const expected = 'Login';63 expect(actual).to.equal(expected);64 });65 it('verify that Login button has correct text-color', () => {66 const actualColor = $(loginButton).getCSSProperty('color').parsed.hex;67 const expectColor = '#333333';68 expect(actualColor).to.equal(expectColor);69 });70 it('verify that Login button has correct background-color', () => {71 const actualColor = $(loginButton).getCSSProperty('background-color').parsed.hex;72 const expectColor = '#000000';73 expect(actualColor).to.equal(expectColor);74 });75 it('verify that Login button has font-size 17px', () => {76 const actualSize = $(loginButton).getCSSProperty('font-size').parsed.string;77 const expectFontSize = '17px';78 expect(actualSize).to.equal(expectFontSize);79 });80 it('verify that Login button has font-weight 400', () => {81 const actualWeight = $(loginButton).getCSSProperty('font-weight').parsed.string;82 const expectFontWeight = '400';83 expect(actualWeight).to.equal(expectFontWeight);84 });85 it('verify that text-align of Login button is left', () => {86 const actualAlignment = $(loginButton).getCSSProperty('text-align').parsed.string;87 const expectAlignment = 'left';88 expect(actualAlignment).to.equal(expectAlignment);89 });90 it('verify that Login button has correct font-family', () => {91 const font = $(loginButton).getCSSProperty('font-family').parsed.string;92 expect(font).to.equal(93 '"sf pro display", "sf pro icons", "helvetica neue", helvetica, arial, sans-serif',94 );95 });96 it('verify that navigation bar has Register button', () => {97 const actual = $(registerButton).getText();98 const expected = 'Register';99 expect(actual).to.equal(expected);100 });101 it('verify that Register button has correct text-color', () => {102 const actualColor = $(registerButton)103 .getCSSProperty('color')104 .parsed.hex.toLowerCase();105 const expectColor = '#0052cc';106 expect(actualColor).to.equal(expectColor);107 });108 it('verify that Register button has correct background-color', () => {109 const actualColor = $(registerButton).getCSSProperty('background-color').parsed.hex;110 const expectColor = '#000000';111 expect(actualColor).to.equal(expectColor);112 });113 it('verify that Register button has font-size 17px', () => {114 const actualSize = $(registerButton).getCSSProperty('font-size').parsed.string;115 const expectFontSize = '17px';116 expect(actualSize).to.equal(expectFontSize);117 });118 it('verify that Register button has font-weight 400', () => {119 const actualWeight = $(registerButton).getCSSProperty('font-weight').parsed.string;120 const expectFontWeight = '400';121 expect(actualWeight).to.equal(expectFontWeight);122 });123 it('verify that text-align of Register button is center', () => {124 const actualAlignment = $(registerButton).getCSSProperty('text-align').parsed.string;125 const expectAlignment = 'center';126 expect(actualAlignment).to.equal(expectAlignment);127 });128 it('verify that Register button has correct font-family', () => {129 const font = $(registerButton).getCSSProperty('font-family').parsed.string;130 expect(font).to.equal(131 '"sf pro display", "sf pro icons", "helvetica neue", helvetica, arial, sans-serif',132 );133 });134 it('verify that Register button has correct border-color', () => {135 const borderColor = $(registerButton)136 .getCSSProperty('border-color')137 .parsed.hex.toLowerCase();138 expect(borderColor).to.equal('#0052cc');139 });...

Full Screen

Full Screen

checkProperty.spec.js

Source:checkProperty.spec.js Github

copy

Full Screen

1import checkProperty from 'src/support/check/checkProperty';2describe(3 'checkProperty', () => {4 let done;5 let expectToEqual;6 let expectToNotEqual;7 beforeEach(() => {8 global.browser = {9 getCssProperty: jest.fn(() => {}),10 getAttribute: jest.fn(() => 'element-name'),11 };12 expectToEqual = jest.fn();13 expectToNotEqual = jest.fn();14 global.expect = jest.fn(() => ({15 to: {16 not: {17 equal: expectToNotEqual,18 },19 equal: expectToEqual,20 },21 }));22 done = jest.fn();23 });24 it('Should test if the element has the correct color',25 () => {26 global.browser.getCssProperty.mockReturnValueOnce({27 value: 'black',28 });29 checkProperty(true, 'color', '#elem1', false, 'black', done);30 _expect(global.browser.getCssProperty).toHaveBeenCalledTimes(1);31 _expect(global.browser.getCssProperty)32 .toHaveBeenCalledWith(33 '#elem1',34 'color'35 );36 _expect(global.browser.getAttribute).not.toHaveBeenCalled();37 _expect(expectToEqual).toHaveBeenCalledTimes(1);38 _expect(expectToEqual)39 .toHaveBeenCalledWith(40 'black',41 'CSS attribute of element "#elem1" should not ' +42 'contain "black", but "black"'43 );44 _expect(done).toHaveBeenCalledTimes(1);45 }46 );47 it('Should test if the element does not have a width of 1px',48 () => {49 global.browser.getCssProperty.mockReturnValueOnce(50 '1px'51 );52 checkProperty(true, 'width', '#elem2', true, '1px', done);53 _expect(global.browser.getCssProperty).toHaveBeenCalledTimes(1);54 _expect(global.browser.getCssProperty)55 .toHaveBeenCalledWith(56 '#elem2',57 'width'58 );59 _expect(global.browser.getAttribute).not.toHaveBeenCalled();60 _expect(expectToNotEqual).toHaveBeenCalledTimes(1);61 _expect(expectToNotEqual)62 .toHaveBeenCalledWith(63 '1px',64 'CSS attribute of element "#elem2" should not ' +65 'contain "1px"'66 );67 _expect(done).toHaveBeenCalledTimes(1);68 }69 );70 it('Should test if the element has the correct name',71 () => {72 checkProperty(73 false,74 'name',75 '#elem3',76 false,77 'element-name',78 done79 );80 _expect(global.browser.getAttribute).toHaveBeenCalledTimes(1);81 _expect(global.browser.getAttribute)82 .toHaveBeenCalledWith(83 '#elem3',84 'name'85 );86 _expect(global.browser.getCssProperty).not.toHaveBeenCalled();87 _expect(expectToEqual).toHaveBeenCalledTimes(1);88 _expect(expectToEqual).toHaveBeenCalledWith(89 'element-name',90 'Attribute of element "#elem3" should not contain ' +91 '"element-name", but "element-name"'92 );93 _expect(done).toHaveBeenCalledTimes(1);94 }95 );96 }...

Full Screen

Full Screen

headlines.spec.js

Source:headlines.spec.js Github

copy

Full Screen

1describe('typography - headlines tests', function(){2 beforeEach(function() {3 browser.url('/docs/pages/typography.html#headlines');4 });5 it('should have the correct font sizes in viewport < M ',function() {6 browser.setViewportSize({width: 640, height: 800});7 browser.getCssProperty('.example-headlines h1.sc-font', 'font-size').value.should.equal('24px');8 browser.getCssProperty('.example-headlines h1.sc-font', 'font-weight').value.should.equal('normal');9 browser.getCssProperty('.example-headlines h2.sc-font', 'font-size').value.should.be.equal('20px');10 browser.getCssProperty('.example-headlines h2.sc-font', 'font-weight').value.should.equal(600);11 browser.getCssProperty('.example-headlines h3.sc-font', 'font-size').value.should.be.equal('16px');12 browser.getCssProperty('.example-headlines h3.sc-font', 'font-weight').value.should.equal(600);13 browser.getCssProperty('.example-headlines h4.sc-font', 'font-size').value.should.be.equal('16px');14 browser.getCssProperty('.example-headlines h4.sc-font', 'font-weight').value.should.equal('normal');15 browser.getCssProperty('.example-headlines h5.sc-font', 'font-size').value.should.be.equal('16px');16 browser.getCssProperty('.example-headlines h5.sc-font', 'font-weight').value.should.equal('normal');17 return browser;18 });19 it('should have the correct font sizes in viewport >= M ',function() {20 browser.setViewportSize({width: 1280, height: 1024});21 browser.getCssProperty('.example-headlines h1.sc-font', 'font-size').value.should.be.equal('32px');22 browser.getCssProperty('.example-headlines h1.sc-font', 'font-weight').value.should.equal('normal');23 browser.getCssProperty('.example-headlines h2.sc-font', 'font-size').value.should.be.equal('24px');24 browser.getCssProperty('.example-headlines h2.sc-font', 'font-weight').value.should.equal(600);25 browser.getCssProperty('.example-headlines h3.sc-font', 'font-size').value.should.be.equal('24px');26 browser.getCssProperty('.example-headlines h3.sc-font', 'font-weight').value.should.equal('normal');27 browser.getCssProperty('.example-headlines h4.sc-font', 'font-size').value.should.be.equal('20px');28 browser.getCssProperty('.example-headlines h4.sc-font', 'font-weight').value.should.equal(600);29 browser.getCssProperty('.example-headlines h5.sc-font', 'font-size').value.should.be.equal('16px');30 browser.getCssProperty('.example-headlines h5.sc-font', 'font-weight').value.should.equal(600);31 return browser;32 });...

Full Screen

Full Screen

body-copy.spec.js

Source:body-copy.spec.js Github

copy

Full Screen

1describe('typography - body-copy tests', function(){2 beforeEach(function() {3 browser.url('/docs/pages/typography.html#headlines');4 });5 it('should have the correct font sizes',function() {6 browser.getCssProperty('.example-body-copy .sc-font-s', 'font-size').value.should.equal('12px');7 browser.getCssProperty('.example-body-copy .sc-font-m', 'font-size').value.should.equal('16px');8 browser.getCssProperty('.example-body-copy .sc-font-l', 'font-size').value.should.equal('20px');9 browser.getCssProperty('.example-body-copy .sc-font-xl', 'font-size').value.should.equal('24px');10 browser.getCssProperty('.example-body-copy .sc-font-xxl', 'font-size').value.should.equal('32px');11 browser.getCssProperty('.example-body-copy .sc-font-xxxl', 'font-size').value.should.equal('40px');12 browser.getCssProperty('.example-body-copy .sc-font-silent', 'font-size').value.should.equal('16px');13 browser.getCssProperty('.example-body-copy .sc-font-bold', 'font-size').value.should.equal('16px');14 return browser;15 });16 it('should have the correct font weight',function() {17 browser.getCssProperty('.example-body-copy .sc-font-s', 'font-weight').value.should.equal('normal');18 browser.getCssProperty('.example-body-copy .sc-font-m', 'font-weight').value.should.equal('normal');19 browser.getCssProperty('.example-body-copy .sc-font-l', 'font-weight').value.should.equal('normal');20 browser.getCssProperty('.example-body-copy .sc-font-xl', 'font-weight').value.should.equal('normal');21 browser.getCssProperty('.example-body-copy .sc-font-xxl', 'font-weight').value.should.equal('normal');22 browser.getCssProperty('.example-body-copy .sc-font-xxxl', 'font-weight').value.should.equal('normal');23 browser.getCssProperty('.example-body-copy .sc-font-bold', 'font-weight').value.should.equal(600);24 return browser;25 });...

Full Screen

Full Screen

setTranslateX.js

Source:setTranslateX.js Github

copy

Full Screen

1import getCssProperty from './getCssProperty'2const cssTransform = getCssProperty('transform')3const cssTransitionDuration = getCssProperty('transition-duration')4export default (el, value) => {5 if (!el) return6 el.style[cssTransform] = `translate3d(${value}px, 0, 0)`7 el.style[cssTransitionDuration] = ''8 return value...

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 .getCSSProperty('body', 'background-color', function(err, result) {9 console.log(result.value);10 })11 .end();12{ r: 255, g: 255, b: 255, a: 1 }

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1var webdriverio = require('webdriverio');2var options = {3 desiredCapabilities: {4 }5};6var client = webdriverio.remote(options);7 .init()8 .getCSSProperty('body','background-color', function(err, result) {9 console.log(result);10 })11 .end();12{ type: 'color',13 value: { r: 255, g: 255, b: 255, a: 1 } }

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 .getCSSProperty('body', 'background-color', function(err, result) {9 console.log(result);10 })11 .end();12{ property: 'background-color',13 value: 'rgba(255, 255, 255, 1)',14 parsed: { r: 255, g: 255, b: 255, a: 1 } }

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 .getCSSProperty('body','font-size', function(err, result) {6 console.log(result);7 })8 .end();9{ property: 'font-size',10 parsed: { string: '16px', unit: 'px', value: 16 } }

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 .getCSSProperty('input[type="text"]', 'display', function(err, result) {6 console.log(result.value);7 })8 .end();9var webdriverio = require('webdriverio');10var options = { desiredCapabilities: { browserName: 'chrome' } };11var client = webdriverio.remote(options);12 .init()13 .getHTML('input[type="text"]', function(err, result) {14 console.log(result);15 })16 .end();17var webdriverio = require('webdriverio');18var options = { desiredCapabilities: { browserName: 'chrome' } };19var client = webdriverio.remote(options);20 .init()21 .getText('input[type="text"]', function(err, result) {22 console.log(result);23 })24 .end();

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1const assert = require('assert');2describe('webdriver.io page', () => {3 it('should have the right title', () => {4 const title = browser.getTitle();5 assert.equal(title, 'WebdriverIO - WebDriver bindings for Node.js');6 console.log(browser.getCSSProperty('h1', 'font-size'));7 });8});9{ property: 'font-size',10 parsed: { value

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1describe('My First Test' , () => {2 it('Visits the Kitchen Sink' , () => {3 browser.pause(2000)4 browser.maximizeWindow()5 browser.pause(2000)6 browser.getCssProperty('#SIvCob', 'color')7 browser.pause(2000)8 })9})

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 .getCSSProperty('#someElement', 'font-size', function(err, result) {6 console.log(result.value);7 })8 .end();

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