New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support XPath based selectors #1178

Closed
georgiy-abbasov opened this Issue Jan 26, 2017 · 14 comments

Comments

Projects
None yet
9 participants
@georgiy-abbasov
Copy link
Contributor

georgiy-abbasov commented Jan 26, 2017

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

This comment has been minimized.

Copy link

Jeroenhuisjes commented Feb 6, 2017

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

@mkubrycz

This comment has been minimized.

Copy link

mkubrycz commented May 15, 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

@Uninen

This comment has been minimized.

Copy link

Uninen commented Jul 21, 2017

+1

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

@lnfnunes

This comment has been minimized.

Copy link

lnfnunes commented Nov 28, 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!

@AlexanderMoskovkin

This comment has been minimized.

Copy link
Contributor

AlexanderMoskovkin commented Dec 8, 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);
});
@neilmatillano

This comment has been minimized.

Copy link

neilmatillano commented Jan 15, 2018

@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

This comment has been minimized.

Copy link
Contributor

AlexanderMoskovkin commented Jan 17, 2018

Hi @neilmatillano,

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

@xcb6

This comment has been minimized.

Copy link

xcb6 commented Feb 28, 2018

@neilmatillano

This comment has been minimized.

Copy link

neilmatillano commented Feb 28, 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

@xcb6

This comment has been minimized.

Copy link

xcb6 commented Mar 1, 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)
...
@neilmatillano

This comment has been minimized.

Copy link

neilmatillano commented Mar 1, 2018

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

@neilmatillano

This comment has been minimized.

Copy link

neilmatillano commented Mar 1, 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'

@Andrei1982

This comment has been minimized.

Copy link

Andrei1982 commented Mar 10, 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?

@AlexanderMoskovkin

This comment has been minimized.

Copy link
Contributor

AlexanderMoskovkin commented Apr 19, 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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment