How to use addElementBoxModelLayers method in Cypress

Best JavaScript code snippet using cypress

dom.js

Source:dom.js Github

copy

Full Screen

1import _ from 'lodash'2import { $ } from '@packages/driver'3import Promise from 'bluebird'4import selectorPlaygroundHighlight from '../selector-playground/highlight'5const styles = (styleString) => {6 return styleString.replace(/\s*\n\s*/g, '')7}8const resetStyles = `9 border: none !important;10 margin: 0 !important;11 padding: 0 !important;12`13function addHitBoxLayer (coords, body) {14 if (body == null) {15 body = $('body')16 }17 const height = 1018 const width = 1019 const dotHeight = 420 const dotWidth = 421 const top = coords.y - height / 222 const left = coords.x - width / 223 const dotTop = height / 2 - dotHeight / 224 const dotLeft = width / 2 - dotWidth / 225 const boxStyles = styles(`26 ${resetStyles}27 position: absolute;28 top: ${top}px;29 left: ${left}px;30 width: ${width}px;31 height: ${height}px;32 background-color: red;33 border-radius: 5px;34 box-shadow: 0 0 5px #333;35 z-index: 2147483647;36 `)37 const box = $(`<div class="__cypress-highlight" style="${boxStyles}" />`)38 const wrapper = $(`<div style="${styles(resetStyles)} position: relative" />`).appendTo(box)39 const dotStyles = styles(`40 ${resetStyles}41 position: absolute;42 top: ${dotTop}px;43 left: ${dotLeft}px;44 height: ${dotHeight}px;45 width: ${dotWidth}px;46 height: ${dotHeight}px;47 background-color: pink;48 border-radius: 5px;49 `)50 $(`<div style="${dotStyles}">`).appendTo(wrapper)51 return box.appendTo(body)52}53function addElementBoxModelLayers ($el, body) {54 if (body == null) {55 body = $('body')56 }57 const dimensions = getElementDimensions($el)58 const container = $('<div class="__cypress-highlight">')59 const layers = {60 Content: '#9FC4E7',61 Padding: '#C1CD89',62 Border: '#FCDB9A',63 Margin: '#F9CC9D',64 }65 // create the margin / bottom / padding layers66 _.each(layers, (color, attr) => {67 let obj68 switch (attr) {69 case 'Content':70 // rearrange the contents offset so71 // its inside of our border + padding72 obj = {73 width: dimensions.width,74 height: dimensions.height,75 top: dimensions.offset.top + dimensions.borderTop + dimensions.paddingTop,76 left: dimensions.offset.left + dimensions.borderLeft + dimensions.paddingLeft,77 }78 break79 default:80 obj = {81 width: getDimensionsFor(dimensions, attr, 'width'),82 height: getDimensionsFor(dimensions, attr, 'height'),83 top: dimensions.offset.top,84 left: dimensions.offset.left,85 }86 }87 // if attr is margin then we need to additional88 // subtract what the actual marginTop + marginLeft89 // values are, since offset disregards margin completely90 if (attr === 'Margin') {91 obj.top -= dimensions.marginTop92 obj.left -= dimensions.marginLeft93 }94 // bail if the dimensions of this layer match the previous one95 // so we dont create unnecessary layers96 if (dimensionsMatchPreviousLayer(obj, container)) return97 return createLayer($el, attr, color, container, obj)98 })99 container.appendTo(body)100 container.children().each((index, el) => {101 const $el = $(el)102 const top = $el.data('top')103 const left = $el.data('left')104 // dont ask... for some reason we105 // have to run offset twice!106 _.times(2, () => $el.offset({ top, left }))107 })108 return container109}110function getOrCreateSelectorHelperDom ($body) {111 let $container = $body.find('.__cypress-selector-playground')112 if ($container.length) {113 const shadowRoot = $container.find('.__cypress-selector-playground-shadow-root-container')[0].shadowRoot114 return Promise.resolve({115 $container,116 shadowRoot,117 $reactContainer: $(shadowRoot).find('.react-container'),118 $cover: $container.find('.__cypress-selector-playground-cover'),119 })120 }121 $container = $('<div />')122 .addClass('__cypress-selector-playground')123 .css({ position: 'static' })124 .appendTo($body)125 const $shadowRootContainer = $('<div />')126 .addClass('__cypress-selector-playground-shadow-root-container')127 .css({ position: 'static' })128 .appendTo($container)129 const shadowRoot = $shadowRootContainer[0].attachShadow({ mode: 'open' })130 const $reactContainer = $('<div />')131 .addClass('react-container')132 .appendTo(shadowRoot)133 const $cover = $('<div />')134 .addClass('__cypress-selector-playground-cover')135 .appendTo($container)136 return Promise.try(() => fetch('/__cypress/runner/cypress_selector_playground.css'))137 .then((result) => {138 return result.text()139 })140 .then((content) => {141 $('<style />', { html: content }).prependTo(shadowRoot)142 return { $container, shadowRoot, $reactContainer, $cover }143 })144 .catch((error) => {145 console.error('Selector playground failed to load styles:', error) // eslint-disable-line no-console146 return { $container, shadowRoot, $reactContainer, $cover }147 })148}149function addOrUpdateSelectorPlaygroundHighlight ({ $el, $body, selector, showTooltip, onClick }) {150 getOrCreateSelectorHelperDom($body)151 .then(({ $container, shadowRoot, $reactContainer, $cover }) => {152 if (!$el) {153 selectorPlaygroundHighlight.unmount($reactContainer[0])154 $cover.off('click')155 $container.remove()156 return157 }158 const borderSize = 2159 const styles = $el.map((__, el) => {160 const $el = $(el)161 const offset = $el.offset()162 return {163 position: 'absolute',164 margin: 0,165 padding: 0,166 width: $el.outerWidth(),167 height: $el.outerHeight(),168 top: offset.top - borderSize,169 left: offset.left - borderSize,170 transform: $el.css('transform'),171 zIndex: getZIndex($el),172 }173 }).get()174 if (styles.length === 1) {175 $cover176 .css(styles[0])177 .off('click')178 .on('click', onClick)179 }180 selectorPlaygroundHighlight.render($reactContainer[0], {181 selector,182 appendTo: shadowRoot,183 boundary: $body[0],184 showTooltip,185 styles,186 })187 })188}189function createLayer ($el, attr, color, container, dimensions) {190 const transform = $el.css('transform')191 const css = {192 transform,193 width: dimensions.width,194 height: dimensions.height,195 position: 'absolute',196 zIndex: getZIndex($el),197 backgroundColor: color,198 opacity: 0.6,199 }200 return $('<div>')201 .css(css)202 .attr('data-top', dimensions.top)203 .attr('data-left', dimensions.left)204 .attr('data-layer', attr)205 .prependTo(container)206}207function dimensionsMatchPreviousLayer (obj, container) {208 // since we're prepending to the container that209 // means the previous layer is actually the first child element210 const previousLayer = container.children().first()211 // bail if there is no previous layer212 if (!previousLayer.length) { return }213 return obj.width === previousLayer.width() &&214 obj.height === previousLayer.height()215}216function getDimensionsFor (dimensions, attr, dimension) {217 return dimensions[`${dimension}With${attr}`]218}219function getZIndex (el) {220 if (/^(auto|0)$/.test(el.css('zIndex'))) {221 return 2147483647222 } else {223 return _.toNumber(el.css('zIndex'))224 }225}226function getElementDimensions (el) {227 const dimensions = {228 offset: el.offset(), // offset disregards margin but takes into account border + padding229 height: el.height(), // we want to use height here (because that always returns just the content hight) instead of .css() because .css('height') is altered based on whether box-sizing: border-box is set230 width: el.width(),231 paddingTop: getPadding(el, 'top'),232 paddingRight: getPadding(el, 'right'),233 paddingBottom: getPadding(el, 'bottom'),234 paddingLeft: getPadding(el, 'left'),235 borderTop: getBorder(el, 'top'),236 borderRight: getBorder(el, 'right'),237 borderBottom: getBorder(el, 'bottom'),238 borderLeft: getBorder(el, 'left'),239 marginTop: getMargin(el, 'top'),240 marginRight: getMargin(el, 'right'),241 marginBottom: getMargin(el, 'bottom'),242 marginLeft: getMargin(el, 'left'),243 }244 // innerHeight: Get the current computed height for the first245 // element in the set of matched elements, including padding but not border.246 // outerHeight: Get the current computed height for the first247 // element in the set of matched elements, including padding, border,248 // and optionally margin. Returns a number (without 'px') representation249 // of the value or null if called on an empty set of elements.250 dimensions.heightWithPadding = el.innerHeight()251 dimensions.heightWithBorder = el.innerHeight() + getTotalFor(['borderTop', 'borderBottom'], dimensions)252 dimensions.heightWithMargin = el.outerHeight(true)253 dimensions.widthWithPadding = el.innerWidth()254 dimensions.widthWithBorder = el.innerWidth() + getTotalFor(['borderRight', 'borderLeft'], dimensions)255 dimensions.widthWithMargin = el.outerWidth(true)256 return dimensions257}258function getAttr (el, attr) {259 // nuke anything thats not a number or a negative symbol260 const num = _.toNumber(el.css(attr).replace(/[^0-9\.-]+/, ''))261 if (!_.isFinite(num)) {262 throw new Error('Element attr did not return a valid number')263 }264 return num265}266function getPadding (el, dir) {267 return getAttr(el, `padding-${dir}`)268}269function getBorder (el, dir) {270 return getAttr(el, `border-${dir}-width`)271}272function getMargin (el, dir) {273 return getAttr(el, `margin-${dir}`)274}275function getTotalFor (directions, dimensions) {276 return _.reduce(directions, (memo, direction) => memo + dimensions[direction], 0)277}278function getOuterSize (el) {279 return {280 width: el.outerWidth(true),281 height: el.outerHeight(true),282 }283}284function isInViewport (win, el) {285 let rect = el.getBoundingClientRect()286 return (287 rect.top >= 0 &&288 rect.left >= 0 &&289 rect.bottom <= $(win).height() &&290 rect.right <= $(win).width()291 )292}293function scrollIntoView (win, el) {294 if (!el || isInViewport(win, el)) return295 el.scrollIntoView()296}297const sizzleRe = /sizzle/i298function getElementsForSelector ({ root, selector, method, cypressDom }) {299 let $el = null300 try {301 if (method === 'contains') {302 $el = root.find(cypressDom.getContainsSelector(selector))303 if ($el.length) {304 $el = cypressDom.getFirstDeepestElement($el)305 }306 } else {307 $el = root.find(selector)308 }309 } catch (err) {310 // if not a sizzle error, ignore it and let $el be null311 if (!sizzleRe.test(err.stack)) throw err312 }313 return $el314}315function addCssAnimationDisabler ($body) {316 $(`317 <style id="__cypress-animation-disabler">318 *, *:before, *:after {319 transition-property: none !important;320 animation: none !important;321 }322 </style>323 `).appendTo($body)324}325function removeCssAnimationDisabler ($body) {326 $body.find('#__cypress-animation-disabler').remove()327}328function addBlackout ($body, selector) {329 let $el330 try {331 $el = $body.find(selector)332 if (!$el.length) return333 } catch (err) {334 // if it's an invalid selector, just ignore it335 return336 }337 const dimensions = getElementDimensions($el)338 const width = dimensions.widthWithBorder339 const height = dimensions.heightWithBorder340 const top = dimensions.offset.top341 const left = dimensions.offset.left342 const style = styles(`343 ${resetStyles}344 position: absolute;345 top: ${top}px;346 left: ${left}px;347 width: ${width}px;348 height: ${height}px;349 background-color: black;350 z-index: 2147483647;351 `)352 $(`<div class="__cypress-blackout" style="${style}">`).appendTo($body)353}354function removeBlackouts ($body) {355 $body.find('.__cypress-blackout').remove()356}357export default {358 addBlackout,359 removeBlackouts,360 addElementBoxModelLayers,361 addHitBoxLayer,362 addOrUpdateSelectorPlaygroundHighlight,363 addCssAnimationDisabler,364 removeCssAnimationDisabler,365 getElementsForSelector,366 getOuterSize,367 scrollIntoView,...

Full Screen

Full Screen

aut-iframe.js

Source:aut-iframe.js Github

copy

Full Screen

...158 // if it only has margin and zero content height / width159 const dimensions = dom.getOuterSize(el)160 // dont show anything if our element displaces nothing161 if (dimensions.width === 0 || dimensions.height === 0 || el.css('display') === 'none') return162 dom.addElementBoxModelLayers(el, body).attr('data-highlight-el', true)163 })164 if (coords) {165 requestAnimationFrame(() => {166 dom.addHitBoxLayer(coords, body).attr('data-highlight-hitbox', true)167 })168 }169 }170 removeHighlights = () => {171 this._contents() && this._contents().find('.__cypress-highlight').remove()172 }173 toggleSelectorPlayground = (isEnabled) => {174 const $body = this._body()175 if (!$body) return176 const clearHighlight = this._clearHighlight.bind(this, false)...

Full Screen

Full Screen

Using AI Code Generation

copy

Full Screen

1import { addElementBoxModelLayers } from 'cypress-visual-regression/dist/command'2describe('My First Test', () => {3 it('Does not do much!', () => {4 cy.contains('type').click()5 cy.url().should('include', '/commands/actions')6 cy.get('.action-email')7 .type('

Full Screen

Using AI Code Generation

copy

Full Screen

1var addElementBoxModelLayers = function (el, options) {2 options = options || {}3 var $el = cy.$(el)4 var boxModel = $el.renderedBoundingBox()5 var $style = $el.attr('style')6 var $layer = cy.$('<div></div>')7 var $layer2 = cy.$('<div></div>')8 var $layer3 = cy.$('<div></div>')9 var $layer4 = cy.$('<div></div>')10 var $layer5 = cy.$('<div></div>')11 var $layer6 = cy.$('<div></div>')12 var $layer7 = cy.$('<div></div>')13 var $layer8 = cy.$('<div></div>')14 var $layer9 = cy.$('<div></div>')15 var $layer10 = cy.$('<div></div>')16 var $layer11 = cy.$('<div></div>')17 var $layer12 = cy.$('<div></div>')18 var $layer13 = cy.$('<div></div>')19 var $layer14 = cy.$('<div></div>')20 var $layer15 = cy.$('<div></div>')21 var $layer16 = cy.$('<div></div>')22 var $layer17 = cy.$('<div></div>')23 var $layer18 = cy.$('<div></div>')24 var $layer19 = cy.$('<div></div>')25 var $layer20 = cy.$('<div></div>')26 var $layer21 = cy.$('<div></div>')27 var $layer22 = cy.$('<div></div>')28 var $layer23 = cy.$('<div></div>')29 var $layer24 = cy.$('<div></div>')30 var $layer25 = cy.$('<div></div>')31 var $layer26 = cy.$('<div></div>')32 var $layer27 = cy.$('<div></div>')33 var $layer28 = cy.$('<div></div>')34 var $layer29 = cy.$('<div></div>')35 var $layer30 = cy.$('<div></div>')36 var $layer31 = cy.$('<div></div>')37 var $layer32 = cy.$('<div></div>')38 var $layer33 = cy.$('<div></div>')39 var $layer34 = cy.$('<div></div>')

Full Screen

Using AI Code Generation

copy

Full Screen

1Cypress.Commands.add('addElementBoxModelLayers', (selector, layers, property, value) => {2 cy.document().then(doc => {3 const style = doc.createElement('style');4 style.id = 'addElementBoxModelLayers';5 doc.body.appendChild(style);6 });7 for (let i = 0; i < layers; i++) {8 cy.get('#addElementBoxModelLayers').then($style => {9 const css = `${selector}{${property}:${value};}`;10 $style.append(css);11 });12 }13});14Cypress.Commands.add('addElementBoxModelLayers', (selector, layers, property, value) => {15 cy.document().then(doc => {16 const style = doc.createElement('style');17 style.id = 'addElementBoxModelLayers';18 doc.body.appendChild(style);19 });20 for (let i = 0; i < layers; i++) {21 cy.get('#addElementBoxModelLayers').then($style => {22 const css = `${selector}{${property}:${value};}`;23 $style.append(css);24 });25 }26});27Cypress.Commands.add('addElementBoxModelLayers', (selector, layers, property, value) => {28 cy.document().then(doc => {29 const style = doc.createElement('style');30 style.id = 'addElementBoxModelLayers';31 doc.body.appendChild(style);32 });33 for (let i = 0; i < layers; i++) {34 cy.get('#addElementBoxModelLayers').then($style => {35 const css = `${selector}{${property}:${value};}`;36 $style.append(css);37 });38 }39});

Full Screen

Cypress Tutorial

Cypress is a renowned Javascript-based open-source, easy-to-use end-to-end testing framework primarily used for testing web applications. Cypress is a relatively new player in the automation testing space and has been gaining much traction lately, as evidenced by the number of Forks (2.7K) and Stars (42.1K) for the project. LambdaTest’s Cypress Tutorial covers step-by-step guides that will help you learn from the basics till you run automation tests on LambdaTest.

Chapters:

  1. What is Cypress? -
  2. Why Cypress? - Learn why Cypress might be a good choice for testing your web applications.
  3. Features of Cypress Testing - Learn about features that make Cypress a powerful and flexible tool for testing web applications.
  4. Cypress Drawbacks - Although Cypress has many strengths, it has a few limitations that you should be aware of.
  5. Cypress Architecture - Learn more about Cypress architecture and how it is designed to be run directly in the browser, i.e., it does not have any additional servers.
  6. Browsers Supported by Cypress - Cypress is built on top of the Electron browser, supporting all modern web browsers. Learn browsers that support Cypress.
  7. Selenium vs Cypress: A Detailed Comparison - Compare and explore some key differences in terms of their design and features.
  8. Cypress Learning: Best Practices - Take a deep dive into some of the best practices you should use to avoid anti-patterns in your automation tests.
  9. How To Run Cypress Tests on LambdaTest? - Set up a LambdaTest account, and now you are all set to learn how to run Cypress tests.

Certification

You can elevate your expertise with end-to-end testing using the Cypress automation framework and stay one step ahead in your career by earning a Cypress certification. Check out our Cypress 101 Certification.

YouTube

Watch this 3 hours of complete tutorial to learn the basics of Cypress and various Cypress commands with the Cypress testing at LambdaTest.

Run Cypress automation tests on LambdaTest cloud grid

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

Try LambdaTest Now !!

Get 100 minutes of automation test minutes FREE!!

Next-Gen App & Browser Testing Cloud

Was this article helpful?

Helpful

NotHelpful