如何在 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);
    });
});