Testcafe: atrribute with "-" do no work

Created on 21 Aug 2019  路  4Comments  路  Source: DevExpress/testcafe

Selector with Attribute name contain "-" do not work with Testcafe.

``` if (await Selector('div').withAttribute('act', '10').exists) {
console.log('act exists')
if (await Selector('div').withAttribute('act', '10').find('.asa').exists) {
console.log('asa exists')
}
}

Works as expected. But

```        if (await Selector('div').withAttribute('data-tooltip', 'Delete').exists) {
            console.log('Datat-Tooltip exists')
            if (await Selector('div').withAttribute('data-tooltip', 'Delete').find('.asa').exists) {
                console.log('asa exists')
            }
        }

Do not work. Testcafe cannot find the Selector.
Whole script for gmail.com

        .navigateTo('https://www.gmail.com')
        .typeText(Selector('#identifierId'), 'xxx', {
            caretPos: 0
        })
        .click(Selector('.RveJvd.snByac'))
        .typeText(Selector('input').withAttribute('name', 'password'), 'xxx', {
            caretPos: 0
        })
        .click(Selector('#passwordNext').find('.RveJvd.snByac'))
        .click(Selector('span').withText('Invitation to join our Brand Channel').nth(1).nth(1).find('span'))
        .wait(2000)
        //.click(Selector('.T-I.J-J5-Ji.nX.T-I-ax7.T-I-Js-Gs.mA[data-tooltip="Delete"]').find('div'))
        if (await Selector('div').withAttribute('data-tooltip', 'Delete').exists) {
            console.log('Data-Tooltip exists')
            if (await Selector('div').withAttribute('data-tooltip', 'Delete').find('.asa').exists) {
                console.log('asa exists')
            }
        }

You can also check with attribute "aria-label" value "Delete". Both attributes contain "-" inside the name, both do not work. Those without "-" working perfect.

testcafe 1.2.1
node 11.14.0
OS: macOS

Auto-locked question

Most helpful comment

I've tested your scenario on gmail and figured out that this is not a bug.
Let's use, for convenience, an assertion instead of the if statement with console.log.

.expect(Selector('div').withAttribute('data-tooltip', 'Delete').find('.asa').exists).ok();

It will fail, but not because of TestCafe. If you open the DevTools Console and find this div, you will see that it has the title="Delete" attribute, but has no data-tooltip="Delete" or aria-label="Delete" attributes. They appear after the first hover on this div and the title attribute is removed. For this reason, the following code will pass:

.hover(Selector('div').withAttribute('title', 'Delete').nth(1))
.expect(Selector('div').withAttribute('data-tooltip', 'Delete').find('.asa').exists).ok();

All 4 comments

I cannot reproduces this behavior. This is my example:

import { Selector } from 'testcafe';

fixture `new fixture`
    .page `https://devexpress.github.io/testcafe/`;

test('test', async t => {
    await t.expect(Selector('meta').withAttribute('http-equiv', 'Content-Type').getAttribute('content')).eql('text/html; charset=utf-8');
});

Please make sure that your selector is correct. To check this, use聽the debug action,聽open the DevTools Console and execute the following code:

$('.T-I.J-J5-Ji.nX.T-I-ax7.T-I-Js-Gs.mA[data-tooltip="Delete"]')

I suggest to use a div selector as I use in my description. Only this can guarantee that we do not have different issues. Also the sample I added is from the gmail.com website, so everyone can test it. Testcafe cannot find any Selector with "-" but can find all selector without "-".

I've tested your scenario on gmail and figured out that this is not a bug.
Let's use, for convenience, an assertion instead of the if statement with console.log.

.expect(Selector('div').withAttribute('data-tooltip', 'Delete').find('.asa').exists).ok();

It will fail, but not because of TestCafe. If you open the DevTools Console and find this div, you will see that it has the title="Delete" attribute, but has no data-tooltip="Delete" or aria-label="Delete" attributes. They appear after the first hover on this div and the title attribute is removed. For this reason, the following code will pass:

.hover(Selector('div').withAttribute('title', 'Delete').nth(1))
.expect(Selector('div').withAttribute('data-tooltip', 'Delete').find('.asa').exists).ok();

This thread has been automatically locked since it is closed and there has not been any recent activity. Please open a new issue for related bugs or feature requests. We recommend you ask TestCafe API, usage and configuration inquiries on StackOverflow.

Was this page helpful?
0 / 5 - 0 ratings