当没有ID或CSS时，TestCafe并获取元素/选择器

Question

您好，我有一个简单的应用程序页面，在开始页面上有免责声明和一个按钮。由于技术的原因，我们将ID剥离并混淆了。

因此按钮的名称为'ok'，因为它显示在下面的页面源代码视图中。注意没有ID。即使将其放在我们的代码中，在生成ID时也会将其删除。

<div style="text-align:center;">
   <input type="button" name="ok" value="Ok" width="40" onclick="swap()" /> 
</div>

我的T​​estCafe js文件中包含以下内容：

import {Selector } from 'testcafe';
import { ClientFunction } from 'testcafe';

fixture `My fixture`
    .page `http://192.168.2.86/mpes/login.jsp`;

test('Disclaimer Page 1', async t => {

    const okBtn  = Selector('button').withAttribute('ok');
    await t
        .click(okBtn);
});


test('Disclaimer Page 2 -- of course tried this ', async t => {
    await t
        .click('ok');
});

。click（'ok'）-也不起作用

甚至尝试了findElementByName ..尝试了很多事情，但是Window vs Document和Selector vs element都不起作用。

任何帮助将不胜感激。

我一直在研究如何在TestCafe文档上获取选择器。似乎没有一个合适的方案非常简单，但是存在很大问题。

谢谢。

Answer 1

如果要选择此元素：

<input type="button" name="ok" value="Ok" width="40" onclick="swap()" />

您可以使用（一个或多个）属性选择器，如下所示：

input[type="button"][name="ok"]

---

如果页面上的only one元素具有属性name="ok"，则可以使用document.querySelector()在javascript中抓取那个单个元素，如下所示：

const myButton = document.querySelector('input[type="button"][name="ok"]');

---

N.B。如果页面上的multiple元素具有属性name="ok"，则可以使用document.querySelectorALL()在javascript中捕获所有它们。