运行自定义 Chai 断言时 Cypress 挂起循环

Question

我一直在尝试创建自己的自定义 chai 断言（基于 Cypress 配方模板：https://github.com/cypress-io/cypress-example-recipes/blob/master/examples/extending-cypress__chai-assertions/cypress /support/index.js）。

我在下面的代码中发现，当它运行时，我最终会得到一个恒定的循环WRAP，如果我this.obj与element它交换，则会产生一个恒定的流GET。我似乎从未取得过比getRect(first).then((actual)

如果有人能帮助我，我将非常感激。

赛普拉斯/集成/test.js

describe('testing custom chai', () => {
  it('uses a custom chai helper', () => {
    cy.visit('https://www.bbc.co.uk/news');
    cy.get('#orb-modules > header').should('be.leftAligned', '#orb-header');
  });
});

赛普拉斯/支持/index.js

function getRect(selector) {
  if (selector === '&document') {
    return cy.document().then(doc => doc.documentElement.getBoundingClientRect());
  } if (typeof selector === 'string') {
    return cy.get(selector).then($elem => $elem[0].getBoundingClientRect());
  }
  return cy.wrap(selector).then(elem => Cypress.$(elem)[0].getBoundingClientRect());
}

function getRects(first, second) {
  return getRect(first).then((actual) => {
    getRect(second).then(expected => [actual, expected]);
  });
}

const aligned = (_chai, utils) => {
  function leftAligned(element) {
    getRects(element,this.obj).then((rects) => {
      this.assert(
        rects[0].left === rects[1].left,
        'expected #{this} to be equal',
        'expected #{this} to not be equal',
        this._obj,
      );
    });
  }
  _chai.Assertion.addMethod('leftAligned', leftAligned);
};

chai.use(aligned);

Answer 1

基本问题是异步命令cy.get(), cy.wrap(),cy.document()不能在自定义断言中使用。我最好的猜测是自动重试机制变得疯狂并给你带来持续的循环。

相反，您可以使用Cypress.$()同步版本（本质上是 Cypress 对象上公开的 jquery）。

以下似乎工作正常。（我将getRects()param 重命名为subject，因为有时它是一个选择器，有时它是传入的对象.should()）。

注意也this._obj代替this.obj.

function getRect(subject) {
  if (subject === '&document') {
    return Cypress.$(document).context.documentElement.getBoundingClientRect();
  }
  if (typeof subject === 'string') {  // the selector passed in to assertion
    return Cypress.$(subject)[0].getBoundingClientRect();
  }
  if (typeof subject === 'object') {  // the element from cy.get() i.e this._obj 
    return subject[0].getBoundingClientRect();
  }
  return null;  // something unkown
}

function getRects(first, second) {
  const actual = getRect(first) 
  const expected = getRect(second)
  return [actual, expected];
}

const aligned = (_chai, utils) => {
  function leftAligned(element) {
    const rects = getRects(element, this._obj)
    this.assert(
      rects[0].left === rects[1].left,
      'expected #{this} to be equal',
      'expected #{this} to not be equal',
      this._obj,
    );
  }
  _chai.Assertion.addMethod('leftAligned', leftAligned);
};
chai.use(aligned);

我无法直接测试您的 BBC 页面，因为发生了跨域问题

拒绝在框架中显示“ https://www.bbc.com/news ”，因为它将“X-Frame-Options”设置为“sameorigin”

但它确实适用于模型页面

赛普拉斯/app/bbc-sim.html

<div id="orb-modules">
  <header>
    <h1>Brexit: Boris Johnson's second attempt to trigger election fails</h1>
  </header>
</div>

并像这样进行测试

it('uses a custom chai helper', () => {
  cy.visit('app/bbc-sim.html')
  cy.get('#orb-modules > header').should('be.leftAligned', '#orb-modules');
});