cypress runner 容器上不显示 Font Awesome 图标

Question

我目前正在使用自己的 react todo 应用学习 cypress。

当我运行集成测试时，我的 UI 图标（通过 CDN 从 font awesome 加载）不显示。因此，我用于删除 Todo 的 UI 按钮没有可见的宽度。

所以点击事件不起作用，我得到了屏幕截图所示的错误。

screenshot

如何确保在我的应用程序中加载了我的字体真棒图标，我可以告诉 cypress 等待还是什么？ - 因为我猜它忽略了外部加载的样式表

screenshot from test code

Answer 1

如果您认为等待元素会有所帮助，那么您可以尝试类似于我在渲染表格时使用的方法：

let rounds = 0;
function checkData () {
    rounds += 1;
    // if we got what we wanted
    cy.wait(5000).get('.table-responsive')
        .getTable().then(tableData => {
        cy.log(JSON.stringify(tableData, null, 2));
        if (tableData && tableData.length > 0)
            // break out of the recursive loop
            return;
        // else recurse
        cy.log(`waiting already ${rounds * 5} seconds`);
        if (rounds > 40) return;
        checkData();
    })
}
checkData();

当我等待按钮启用时，我也会使用类似的东西：

const clickButtonEnabled = () => {
    cy.get('#analyze').then(($btn) => {
        if ($btn.is(":disabled")) {
            cy.wait(2000);
            cy.log('waiting for button to be enabled');
            clickButtonEnabled();
        } else {
            cy.log('analyze button is enabled');
            cy.wrap($btn).click()
        }
    })
};
clickButtonEnabled();