Skip to content
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

Open
georgiy-abbasov opened this issue Jan 26, 2017 · 18 comments
Open

Support XPath based selectors #1178

georgiy-abbasov opened this issue Jan 26, 2017 · 18 comments

Comments

@georgiy-abbasov
Copy link
Contributor

@georgiy-abbasov 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
Copy link

@Jeroenhuisjes Jeroenhuisjes commented Feb 6, 2017

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

@mkubrycz
Copy link

@mkubrycz 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
Copy link

@Uninen Uninen commented Jul 21, 2017

+1

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

@lnfnunes
Copy link

@lnfnunes 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
Copy link
Contributor

@AlexanderMoskovkin 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
Copy link

@neilmatillano 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
Copy link
Contributor

@AlexanderMoskovkin 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.

@neilmatillano
Copy link

@neilmatillano 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
Copy link

@xcb6 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
Copy link

@neilmatillano 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
Copy link

@neilmatillano 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
Copy link

@Andrei1982 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
Copy link
Contributor

@AlexanderMoskovkin 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.

@lock
Copy link

@lock lock bot commented Mar 27, 2019

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.

@lock lock bot locked as resolved and limited conversation to collaborators Mar 27, 2019
@miherlosev miherlosev reopened this Apr 11, 2019
@miherlosev
Copy link
Collaborator

@miherlosev miherlosev commented Apr 11, 2019

I believe it make sense to have build-in XPath support in TestCafe.
One more question - https://stackoverflow.com/questions/55624944/how-to-get-first-occurrence-of-the-element-from-multiple-match-found-in-testcafe

@AndreyBelym AndreyBelym added this to Test API Suggestions in Enhancements processing Jul 15, 2019
@miherlosev
Copy link
Collaborator

@miherlosev miherlosev commented Dec 5, 2019

@wentwrong
Copy link
Contributor

@wentwrong wentwrong commented Jun 26, 2020

Here's one more case. Probably, it should be implemented along with this.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
Enhancements processing
  
Test API Suggestions
Linked pull requests

Successfully merging a pull request may close this issue.

None yet