TestCafe: web application (XAF Application) with dynamic ids

Question

I'm a new user of TestCafe, and I have a problem: the web application that I'm testing has elements with dynamic ids. So when I run my test, I have an error because the Selector not find the element in the exam. How to resolve this problem? Can you help me?

    import { Selector } from 'testcafe';

    fixture `test1212`
        .page `192.168.1.26:801/Login.aspx?ReturnUrl=%2f`;

    test('New Test 1', async t => {
        await t
            .typeText(Selector('#Logon_v0_38054418_MainLayoutEdit_xaf_l13_xaf_dviUserName_Edit_I'), 'TMZ\\rossimarta')
            .pressKey('tab')
            .typeText(Selector('#Logon_v0_38054418_MainLayoutEdit_xaf_l17_xaf_dviPassword_Edit_I'), 'gipstech02')
            .click(Selector('span').withText('Accedi'));
    });

The Selector's parameter is the id of the element in the exam, but this id change for each access of the page. So when I run my test, I have an error.

thanks, guys!

Answer 1

The solution is to use another selector, that is not based on the id, but that still is unique to the correct element. To help you further you need provide the html of the form you want to test. You can do something like this:

Selector('form input').withText('Username')

Just tinker it to your needs (based on the html structure). You have to provide the full html of your form if you want a specific solution.

Edit: The end of the generated id is static, in this case it is a input field and the id of it always ends with 'dviUserName_Edit_I'. A selector can be created that only checks the end of the id:

Selector("input[id$='dviUserName_Edit_I']")

The same thing could be done, if the start would be static:

Selector("input[id^='dviUserName_Edit_I']")

or if the id must contain 'some string':

Selector("input[id~="some string"]")