我一直在尝试创建自己的自定义 chai 断言(基于 Cypress 配方模板:https://github.com/cypress-io/cypress-example-recipes/blob/master/examples/extending-cypress__chai-assertions/cypress/support/index.js)。
我在下面的代码中发现,当它运行时,如果我将 this.obj
与 交换,我最终会得到
然后会产生持续的 WRAP
的恒定循环>elementGET
流。我似乎没有比 getRect(first).then((actual)
如果有人能帮助我,我将非常感激。
cypress/integration/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');
});
});
cypress/support/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);
最佳答案
基本问题是异步命令cy.get()
、cy.wrap()
、cy.document()
可以不能在自定义断言中使用。我最好的猜测是自动重试机制变得疯狂并给你带来持续的循环。
相反,您可以使用 Cypress.$()
这是同步版本(本质上是在 Cypress 对象上公开的 jquery)。
以下似乎工作正常。 (我将 getRects()
参数重命名为 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 页面,因为出现了跨域问题
Refused to display 'https://www.bbc.com/news' in a frame because it set 'X-Frame-Options' to 'sameorigin'
但它确实适用于模型页面
cypress/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');
});
关于chai - 运行自定义 Chai 断言时 Cypress 挂起循环,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57557970/