我有一个使用 Blockly 的 React Web 应用程序,我目前正在尝试编写使用 Cypress 框架的自动化测试。
赛普拉斯在基本的登录过程中运行良好,但是一旦 Blockly 应该加载就会开始表现不一致。
大约有一半的时间,应用程序的整个 Blockly 部分根本不会出现在 Cypress 视口中。有时会出现,有时不会,而且我不确定是什么原因导致它或如何真正重现它,它似乎是随机的。
这是正确加载时的外观
这是无法正确加载时的外观
起初,我认为它不起作用的原因是因为 Blockly 的资源没有加载,并且 Cypress 试图访问不存在的资源。
为了解决这个问题,我添加了一个延迟,使用cy.wait()
. 我尝试了从 1s 到 10s 的任何时间,但延迟似乎没有影响任何事情,无论延迟多长时间,如果应用程序的 Blockly 部分正确加载,它似乎都没有影响。
以下是使用的赛普拉斯测试文件部分的代码:
it('Sign in with created profile', () => {
cy.visit('localhost:3000/');
cy.get('input[name="email"]')
.type('test123@test.com').should('have.value', 'test123@test.com');
cy.get('input[name="password"]')
.type('testtest').should('have.value', 'testtest');
cy.get('button[type="submit"]').click();
});
it('Open created project', () => {
cy.get('div[class="project-container"]').contains('test project').click();
});
it('Drop 1+1 block into grid', () => { //2s delay
cy.wait(2000).then((prom) => {
cy.get('div[class="blocklyTreeRow"]').contains('Math').click({ force: true });
});
});
它运行良好,直到运行测试的“打开创建的项目”部分之后,如果应用程序的 Blockly 部分出现,则它是一个成功或失败。有关可能发生的情况,请参阅上面的图像。