Testcafe: Support XPath based selectors

Created on 26 Jan 2017 · 18Comments · Source: DevExpress/testcafe

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"]/../')

level 2 enhancement

Source

georgiy-abbasov

👍7 👎1

Most helpful comment

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);
});

AlexanderMoskovkin on 8 Dec 2017

👍5

All 18 comments

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

Jeroenhuisjes on 6 Feb 2017

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

mkubrycz on 15 May 2017

👍5

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

Uninen on 21 Jul 2017

@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!

lnfnunes on 28 Nov 2017

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);
});

AlexanderMoskovkin on 8 Dec 2017

👍5

@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]

neilmatillano on 15 Jan 2018

Hi @neilmatillano,

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

AlexanderMoskovkin on 17 Jan 2018

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

xcb6 on 28 Feb 2018

@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

neilmatillano on 28 Feb 2018

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)
...

xcb6 on 1 Mar 2018

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

neilmatillano on 1 Mar 2018

@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'_

neilmatillano on 1 Mar 2018

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?

Andrei1982 on 10 Mar 2018

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.

AlexanderMoskovkin on 19 Apr 2018

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs or feature requests. For TestCafe API, usage and configuration inquiries, we recommend asking them on StackOverflow.