Repository: cypress-io/cypress
File: packages/driver/cypress/integration/e2e/dom_hitbox.spec.js (JavaScript)

Code before:
  it('highlight elements with css transform on parent', () => {
    cy.$$('<div id="parent">parent<div id="child">child</div></div>').css({
      transform: 'scale(1.5) rotate(45deg) translate(100px, 20px)',
      height: 40,
      width: 60,
    })
    .prependTo(cy.$$('body'))

    getAndPin('#child')

    // TODO: assert covers element bounding-box
    ensureCorrectHighlightPositions(null)
  })

  it('correct target position during click', () => {
    clickAndPin('#button')
    ensureCorrectHighlightPositions('#button')
    ensureCorrectTargetPosition('#button')
  })

  it('correct target position during click with offset coords', () => {
    clickAndPin('#button', 5, 10)
    ensureCorrectHighlightPositions('#button')
    ensureCorrectTargetPosition('#button')
  })

  it('highlights above z-index elements', () => {
    cy.$$('<div id="absolute-el"></div>').css({
      position: 'absolute',
      zIndex: 1000,
      top: 0,
      left: 0,
      height: 50,
      width: 50,
      padding: 20,
      margin: 20,
      backgroundColor: 'salmon',
    }).appendTo(cy.$$('body'))

    getAndPin('#absolute-el')
    ensureCorrectHighlightPositions('#absolute-el')
  })
})

const ensureCorrectTargetPosition = (sel) => {
  return cy.wrap(null, { timeout: 400 }).should(() => {
    const target = cy.$$('div[data-highlight-hitbox]')[0].getBoundingClientRect()

    const dims = {
      left: target.left + target.width / 2,
      right: target.left + target.width / 2,

Review comment (suggestion):
```suggestion

// https://github.com/cypress-io/cypress/issues/7762
```

Code after:
  it('highlight elements with css transform on parent', () => {
    cy.$$('<div id="parent">parent<div id="child">child</div></div>').css({
      transform: 'scale(1.5) rotate(45deg) translate(100px, 20px)',
      height: 40,
      width: 60,
    })
    .prependTo(cy.$$('body'))

    getAndPin('#child')

    // TODO: assert covers element bounding-box
    ensureCorrectHighlightPositions(null)
  })

  it('correct target position during click', () => {
    clickAndPin('#button')
    ensureCorrectHighlightPositions('#button')
    ensureCorrectTargetPosition('#button')
  })

  it('correct target position during click with offset coords', () => {
    clickAndPin('#button', 5, 10)
    ensureCorrectHighlightPositions('#button')
    ensureCorrectTargetPosition('#button')
  })

  // https://github.com/cypress-io/cypress/issues/7762
  it('highlights above z-index elements', () => {
    cy.$$('<div id="absolute-el"></div>').css({
      position: 'absolute',
      zIndex: 1000,
      top: 0,
      left: 0,
      height: 50,
      width: 50,
      padding: 20,
      margin: 20,
      backgroundColor: 'salmon',
    }).appendTo(cy.$$('body'))

    getAndPin('#absolute-el')
    ensureCorrectHighlightPositions('#absolute-el')
  })
})

const ensureCorrectTargetPosition = (sel) => {
  return cy.wrap(null, { timeout: 400 }).should(() => {
    const target = cy.$$('div[data-highlight-hitbox]')[0].getBoundingClientRect()

    const dims = {
      left: target.left + target.width / 2,