How to Convert Xpath to CSS

Convert Xpath to CSS selector

One should learn how to write css selectors, but a for a quick fix, try: cssify

For example, I put in your xpath and it spit out: form#giftcard-form > div:nth-of-type(3) > div > button

Btw, you had an error in your xpath, it should be this: //form[@id='giftcard-form']/div[3]/div/button

How to convert this Xpath to CSS Selector?

You can not convert that into css selector.

Because you are using ancestor which means to traverse DOM in upward direction.

CSS Selector does not have support to traverse upwards, they can traverse only downwards.

This is limitation of CSS, and in these type of scenarios XPATH should be preferred.

How to convert Xpath to CSS

While an expression like (//E)[2] can't be represented with a CSS selector, an expression like E[2] can be emulated using the :nth-of-type() pseudo-class:

html > body > div > table > tbody > tr:nth-of-type(2) > td:nth-of-type(4)

Convert xPath into CSS selector

Here are the css for the first 2.

'//form//div[contains(@class,"myclass")]'

form div[class*='myclass']

'//div[contains(@class,"myclass")]//input[@type="submit"]'

div[class*='myclass'] input[type='submit']

'.//label[(substring(./@for, ((string-length(./@for) - string-length('_state')) + 1)) = '_state')]'

label[for $='_state']

How to convert this xpath to css?

Unfortunately, you can't.

The problem is that CSS selectors can't find by text. Therefore, you can't translate text()='Continue' XPath to a working CSS selector. This is one of the two main reasons for XPaths to be actually used till today for HTML elements selecting.

There was a :contains() pseudo class for this in CSS3, but it's long gone. Sizzle, the JS engine for CSS selecting in Selenium, has kept it, though. So if your browser doesn't support native CSS selecting (or you disable it), you can use it like this:

button.buttonLargeAlt:contains('Continue')[type='submit']

How to convert a CSS selector to XPath in Javascript?

I would definitely recommend using a library to convert CSS to XPath.

Try css-to-xpath, for example.

Xpath to CSS conversion

Some things are still easier to get via XPath, despite the recommendations not to use XPath location technique. You can though still approach this problem differently using different location mechanisms:

element(by.xpath('//*[@id="availableDomains"]/li[1]'))

would be converted to the following CSS selector:

$('#availableDomains li:first-child')

Instead of:

element(by.xpath('//tbody//tr[td[contains(text(), "' + userId + '")]]'))

the by.cssContainingText can be used:

element(by.cssContainingText("tbody tr td", userId));

This part:

element(by.xpath('//tr[@data-user="' + user.id + '"]'));

can be converted to:

$('tr[data-user="' + user.id + '"]');

As a bonus, if you want to enforce the "never ever use XPaths" rule, there is a eslint-plugin-protractor ESLint plugin that would warn you about the by.xpath() usage in your codebase.

How to convert xpath element which contains text to css

In my understanding, the simplest reproduction of what happens during the test is

DOM starts with two spans

<ul class="cdk-drop-list">
  <li><span class="form-control">Manager</span></li>
  <li><span class="form-control">Undefined</span></li>
</ul>

You add the new entry and the DOM becomes

<ul class="cdk-drop-list">
  <li><span class="form-control">Manager</span></li>
  <li><span class="form-control">Undefined</span></li>
  <li><span class="form-control">Manager</span></li>
</ul>

You want to check the last entry, so AudienceTextfieldSavedValue() should only select the last span in the list (assuming the save action does not sort the list).

static get AudienceTextfieldSavedValue(): Cypress.Chainable<JQuery<HTMLElement>> {
  return cy.get('.cdk-drop-list').find('.form-control')
    .last()                           // assuming the saved field is the last one
    .should('have.text', 'Manager');
}

it('Add Audience', () => {
  Lists.navigateToLists;
  Audience.clickAdd;        
  Audience.AudienceTextfield.type("Manager");        
  Audience.getSaveButton.click().then(() => {                            
    cy.wait(['@savingAudienceRecord']);
  });
  Audience.AudienceTextfieldSavedValue.should('have.text', 'Manager');
});

.should('have.text', 'Manager') is performed twice, so you can perhaps remove it from AudienceTextfieldSavedValue() and just return the last entry.

That way, you can test with different text entry.

You may also want check the number of entries increases from 2 to 3, because if Audience.getSaveButton.click() fails to do the save your test would still pass.

static get AudienceTextfieldSavedValue(): Cypress.Chainable<JQuery<HTMLElement>> {
  return cy.get('.cdk-drop-list').find('.form-control')
    .last()                           // assuming the saved field is the last one
}

static get AudienceTextfieldCount(): Cypress.Chainable<JQuery<HTMLElement>> {
  return cy.get('.cdk-drop-list').find('.form-control')
    .its('length')
}

it('Add Audience', () => {
  Lists.navigateToLists;

  Audience.AudienceTextfieldCount().should('eq', 2)

  Audience.clickAdd;        
  Audience.AudienceTextfield.type("Manager");        
  Audience.getSaveButton.click().then(() => {                            
    cy.wait(['@savingAudienceRecord']);
  });

  Audience.AudienceTextfieldCount().should('eq', 3)
  Audience.AudienceTextfieldSavedValue.should('have.text', 'Manager');
});