TestCafe and grabbing an element/selector when no ID or CSS is present

Question

Hello I have a simple page of our application, the start page that has a disclaimer on it and one button. Because of the technology we are using the IDs are stripped out and obfuscated.

So the button's name is 'ok' as it appears in the page-source view below. Note no ID. Even if I put it in our code, when it is produced the ID is removed.

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

I have the following in my TestCafe js file:

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') -- does not work either

Tried numerous things even trying findElementByName .. but nothing works with Window vs Document and Selector vs element.

Any help would be greatly appreciated.

I have been all over looking at how to grab selectors on TestCafe docs. None seem to fit this scenario which is quite simple -- but highly problematic.

Thanks in advance.

You do not have an attribute called 'ok'. Can you try this: Selector('input').withAttribute('name','ok'). More information about withAttribute: https://devexpress.github.io/testcafe/documentation/test-api/selecting-page-elements/selectors/functional-style-selectors.html#withattribute. — TallKU, Dec 11 '19 at 20:16

Rounin · Answer 1 · 2020-01-28T13:59:12.517

If you want to select this element:

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

you can use (one or more) attribute selectors like this:

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

If only one element on the page has the attribute name="ok", you can grab that single element in javascript, using document.querySelector(), like this:

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

N.B. If multiple elements on the page have the attribute name="ok", you can grab all of them in javascript, using document.querySelectorALL().

TestCafe and grabbing an element/selector when no ID or CSS is present

1 Answers1