Support XPath based selectors

[georgiy-abbasov]

Are you requesting a feature or reporting a bug?

Feature

What is the current behavior?

TestCafe admits CSS and ClientFunction based selectors. It would be nice, if XPath selectors were supported too.

What is the expected behavior?

something like

let submitBtn    = Selector('//form/input[text()="Submit"]')
let submitForm   = Selector('//input[text()="Submit"]/../')

[Jeroenhuisjes]

Would save a lot of time with making tests at the company I work for!

[mkubrycz]

But you can do exactly the same thing using TestCafe API:

let submitBtn = Selector('form input').withText('Submit')
let submitForm = Selector(input).withText('Submit').parent()

IMHO it reads better than clumsy XPath

[Uninen]

+1

This would help a lot with porting old e2e tests to testcafe.

[lnfnunes]

@mkubrycz regardless of better or not, it's a common option from other e2e test runners and will help to port old test-cases to testcafe.
Besides that, it will be an extra option to be used for anyone interested on it!

[AlexanderMoskovkin]

Although TestCafe doesn't support XPath based selectors out-of-the-box now you can use them in your tests. Take a look at my example:

// xpath-selector.js
import { Selector } from 'testcafe';

const elementByXPath = Selector(xpath => {
    const iterator = document.evaluate(xpath, document, null, XPathResult.UNORDERED_NODE_ITERATOR_TYPE, null )
    const items = [];

    let item = iterator.iterateNext();

    while (item) {
        items.push(item);
        item = iterator.iterateNext();
    }

    return items;
});

export default function (xpath) {
    return Selector(elementByXPath(xpath));
}

// test.js
import XPathSelector from './xpath-selector';

fixture `Use XPath`
    .page `https://github.com`;

test('Check header links count', async t => {
    const headerLinkXPath = '/html/body/div[1]/header/div/div[2]/nav/ul/li/a';
    const headerLink =      XPathSelector(headerLinkXPath);
    
    await t
        .maximizeWindow()
        .expect(XPathSelector(headerLinkXPath).count).eql(5);
});

[neilmatillano]

@AlexanderMoskovkin : I want to reuse this function inside my testcafe tests, but it seems like we always need to have it specify the exact path from "/html/...", I am updating the function now as we speak, but if you already have created the updated version of this function, it would be great ;)

XPath formats like this is a bit hard to distinguish...
//*[@id="audiences-creation-form"]/div[2]/fieldset[1]/div/div[2]/div/div/div[2]/div[2]/ul/li/span[1]

[AlexanderMoskovkin]

Hi @neilmatillano,

I haven't worked on this yet, so it would be nice if you add you improved version of this function.

[xcb6]

maybe use https://www.npmjs.com/package/xpath-to-css

[neilmatillano]

@xcb6 : Sounds good, do you have more examples of the usage? One that is working well
I get this error in testcafe even just calling console.log

TypeError: xpath_to_css_1.default is not a function

[xcb6]

work well for me

import { Selector } from 'testcafe'
import xPathToCss from 'xpath-to-css'
const xPath = '//div[@id="foo"][2]/span[@class="bar"]//a[contains(@class, "baz")]//img[1]'
const css = xPathToCss(xPath)
console.log(css)
...

[neilmatillano]

@xcb6 : Maybe it's my version of testcafe. I am using this version : 0.18.7-dev20180206
Which version are you using?

[neilmatillano]

@xcb6 : Found the issue, i am using typescript ... so I should follow the es6 format of importing which is import * as xPathToCss from 'xpath-to-css'

[andreynav]

When I use xpath-to-css recive this issue: "

Invalid or unsupported XPath: .//a[text()="Регистрация"]

Probably, this library isn't work with cyrillic. If transform this locator on this:

.//a[@type="button"][1]

That is all right.
Is it possible to add support of cyrillic for this package?

[AlexanderMoskovkin]

I'm closing this since it can be done with third-party modules (like xpath-to-css). So, we are not going to implement this in the near future.