动作目标位于布局视口testcafe之外

Question

我正在使用

testcafe

进行网络测试。前端应用程序是用reactjs和material ui设计组件编写的。

以下是代码：

import { Selector, ClientFunction,  } from 'testcafe'; // first import testcafe selectors

fixture `Getting Started`// declare the fixture
    .page `https://webserver`;  // specify the start page


const newSearch = Selector('button').withText('Start a New Search');
//then create a test and place your code within it
test('My first test', async t => {
    await t.typeText('#signin-username', '<email>');
    await t.typeText('#signin-password', '<passwd>');
    await t.click('#okta-signin-submit');

    await t.debug();
    const newSearchElement = await newSearch.with({visibilityCheck: true})();
    await t.click(newSearchElement);
});

我正在尝试单击包含文本“开始新搜索”的

button

，但它会抛出错误：

The action target (<button class="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedSuccess MuiButton-sizeMedium MuiButton-containedSizeMedium css-1d4ajd1" tabindex="0" type="button" style="margin-left: 3px;">...</button>) is located outside the layout viewport

该按钮可见，位于网页顶部。按钮的显示属性为

inline-flex

。

错误的是，按钮的css是正确的。 需要进行哪些更改才能通过

testcafe

单击该按钮？

执行我正在运行的测试用例

testcafe edge tests.js

Answer 1

如果不申请，很难找出问题的原因。请分享一个简单的示例。可能，您有另一个具有相同选择器的元素，并且它实际上位于布局视口之外，但被放置在 dom 中的较早位置。