cypress - 如何在 Cypress 中返回文档的尺寸以便稍后在测试中使用

Question

我在 Cypress support/index.js 中有一个函数，用于获取 cy.document outerWidth 和 outerHeight 的尺寸，然后返回它们以供将来在测试中使用。我的问题是，当测试运行并将值与其他值进行比较时，断言表明值为 NaN。我通过控制台检查了在断言点记录的值，它是空的，所以我一定是做错了什么，我只是不确定是什么。我的功能如下，感谢任何帮助，谢谢。

function getViewport() {
  var viewport = {}
  cy.document().then((doc) => {
    let width = Cypress.$(doc).outerWidth()
    let height = Cypress.$(doc).outerHeight()
    viewport['bottom'] = height
    viewport['height'] = height
    viewport['left'] = 0
    viewport['right'] = width
    viewport['top'] = 0
    viewport['width'] = width
    viewport['x'] = 0
    viewport['y'] = 0
  }).then(() => {
    return viewport
  })
  return viewport
}

---

调用getViewport()的代码是

export const getRect = (obj) => {
  var rect
  if (obj == 'viewport') {
    rect = getViewport()
  } else {
    rect = getElement(obj)
    if (Cypress.config('parseLayoutToInt')) { rect = parseAllToInt(rect) }
  }
  return rect
}

这是由自定义命令调用的，其中 subject 是 prevSubject 元素是字符串“viewport”

Cypress.Commands.add('isInside', { prevSubject: true }, (subject, element, expected) => {
  var minuend, subtrahend, diff
  minuend = getRect(element)
  subtrahend = getRect(subject)
  diff = getRectDiff(minuend, subtrahend, expected);
  expect(diff).to.deep.equal(expected);
})

Answer 1

赞@NoriSte说过，cy 命令是异步的，因此您不能将它们与同步代码混合使用。

你想要做的是这样的:

function getViewport() {
  return cy.document().then( doc => {
    rect = /* do something synchronous */
    return rect;
  });
}

---

无论如何，为了回答最初的问题(在标题中)，我使用了几种模式来存储值以供以后在 cypress 中使用:

1. 在 then 回调中包装下一个命令:

   cy.document().then( doc => {
       return doc.documentElement.getBoundingClientRect();
   }).then( viewportRect => {
   
       cy.doSomething(viewportRect);
       cy.doSomethingElse();
   });
   

2. 缓存到变量并从排队命令中访问缓存值:

   let viewportRect;
   
   cy.document().then( doc => {
       return doc.documentElement.getBoundingClientRect();
   }).then( rect => viewportRect = rect );
   
   cy.doSomething();
   
   // this is important -- you need to access the `viewportRect`
   // asynchronously, else it will be undefined at the time of access
   // because it's itself assigned asynchronously in the first command'd callback
   cy.then(() => {
       doSomething(viewportRect);
   });
   

---

针对您问题中的实际问题(如果我理解正确的话)，我制定了一个解决方案，您可以从中学习:

const getRect = (selector) => {
    if (selector == 'viewport') {
        return cy.document().then( doc => {
            return doc.documentElement.getBoundingClientRect();
        });
    } else if ( typeof selector === 'string' ) {
        return cy.get(selector).then( $elem => {
            return $elem[0].getBoundingClientRect();
        });
    // assume DOM elem
    } else {
        return cy.wrap(selector).then( elem => {
            return Cypress.$(elem)[0].getBoundingClientRect();
        });
    }
};

const isInside = (containerRect, childRect) => {
    if ( !containerRect || !childRect ) return false;
    return (
        childRect.top >= containerRect.top &&
        childRect.bottom <= containerRect.bottom &&
        childRect.left >= containerRect.left &&
        childRect.right <= containerRect.right
    );
};

Cypress.Commands.add('isInside', { prevSubject: true }, (child, container, expected) => {
    return getRect(child).then( childRect => {
        getRect(container).then( containerRect => {
            expect(isInside(containerRect, childRect)).to.equal(expected);
        });
    });
});

describe('test', () => {
    it('test', () => {
        cy.document().then( doc => {
            doc.body.innerHTML = `
                <div class="one"></div>
                <div class="two"></div>
                <style>
                    .one, .two {
                        position: absolute;
                    }
                    .one {
                        background: rgba(255,0,0,0.3);
                        width: 400px;
                        height: 400px;
                    }
                    .two {
                        background: rgba(0,0,255,0.3);
                        width: 200px;
                        height: 200px;
                    }
                </style>
            `;
        });
        cy.get('.two').isInside('.one', true);
        cy.get('.one').isInside('.two', false);
    });

    it('test2', () => {
        cy.document().then( doc => {
            doc.body.innerHTML = `
                <div class="one"></div>
                <div class="two"></div>
                <style>
                    body, html { margin: 0; padding: 0 }
                    .one, .two {
                        position: absolute;
                    }
                    .one {
                        background: rgba(255,0,0,0.3);
                        width: 400px;
                        height: 400px;
                    }
                    .two {
                        background: rgba(0,0,255,0.3);
                        width: 200px;
                        height: 200px;
                        left: 300px;
                    }
                </style>
            `;
        });
        cy.get('.two').isInside('.one', false);
        cy.get('.one').isInside('.two', false);
    });
    it('test3', () => {
        cy.document().then( doc => {
            doc.body.innerHTML = `
                <div class="one"></div>
                <style>
                    body, html { margin: 0; padding: 0 }
                    .one {
                        position: absolute;
                        background: rgba(255,0,0,0.3);
                        width: 400px;
                        height: 400px;
                        left: -100px;
                    }
                </style>
            `;
        });
        cy.get('.one').isInside('viewport', false);
    });
});