时间戳

首页 > 解决方案 > 赛普拉斯测试运行程序不呈现 Blockly 类别

cypress - 赛普拉斯测试运行程序不呈现 Blockly 类别

问题描述

我有一个使用 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 部分出现，则它是一个成功或失败。有关可能发生的情况，请参阅上面的图像。

标签： cypressblocklygoogle-blockly

解决方案

请检查您是否尝试自动化 iframe，因为 cypress 不支持 iframe

iframe 打开问题：

https://github.com/cypress-io/cypress/issues/136

别的 ：

尝试使用别名。

// Wait for the route aliased as 'getAccount' to respond
// without changing or stubbing its response
cy.server()
cy.route('/accounts/*').as('getAccount')
cy.visit('/accounts/123')
cy.wait('@getAccount').then((xhr) => {
  // we can now access the low level xhr
  // that contains the request body,
  // response body, status, etc
})

此处提供更多文档： https ://docs.cypress.io/api/commands/wait.html#Alias

推荐阅读