Selector regression with upgrade from 3.5.8 to 3.5.11

[cjhille]

I encountered several regressions when trying to upgrade codeceptjs from 3.5.8 to 3.5.11. Selector that worked with 3.5.8 do not work with 3.5.11.

What do you get instead?

ERROR! Unsupported pseudo :last-of-type. Example selector that is now broken:

lastInputRow: '[data-testid="field-definitions-container"] > *:last-of-type',

I looked through the dependencies. The dependency convert-cssxpath/src/converter.js: throws the error. Likely the same issue as mentioned in slack.

`locator.all: DOMException: Failed to execute 'evaluate' on 'Document': The string '[contains(., 'Delete')]' is not a valid XPath expression. The selector is:

  deleteModal: {
    deleteButton: locate(".p-confirm-popup:last-of-type button").withText("Delete")
  },

Once I remove :last-of-type: the selector works again, so this may just be the same as the first with a different point of failure.

locator.all: DOMException: Failed to execute 'evaluate' on 'Document': The string '//li[@role="option"]//*[@data-testid="date"][ancestor::]' is not a valid XPath expression.. Locator is:

locate(`li[role="option"] [data-testid="${type}"]`).inside('[data-testid="field-definitions-container"] > *:last-of-type')

Likely also the same issue, but I can't fully verify because this is needed for the suite to continue.

[kobenguyent]

hi @cjhille thanks for your report! We made a bold move to replace the current lib with https://www.npmjs.com/package/csstoxpath?activeTab=explore for css to xpath convertion as you could see right here #4101

may you help try with 3.x branch to see if issues still occur?

[cjhille]

@kobenguyent could you tag an alpha (or nightly) release for npm? i'll happily take it for a test drive. :)

[kobenguyent]

Sure @cjhille here you go https://www.npmjs.com/package/codeceptjs/v/3.5.12-beta.1

[cjhille]

Thank you very much! @kobenguyent. Is "last-of-type" somewhat cursed for xpath conversion? Now i'm getting this:

Error: Could not include object examplePo from module '/dev-local/e2e_tests/pageObjects/examplePo.js'
*-of-type pseudos require a tag context
SyntaxError: *-of-type pseudos require a tag context

Selector is still

  deleteModal: {
    deleteButton: locate('.p-confirm-popup:last-of-type button').withText('Delete')
  },

[kobenguyent]

So @cjhille that is unfortunately one of the limitations of the lib https://www.npmjs.com/package/csstoxpath?activeTab=explore#limitations

[cjhille]

@kobenguyent Oh, I see. Thank you for pointing me toward this.

Sadly, this is not the only caveat of the new library. 🥲 Tracking back the issue, I see that the reason for switching was #3563. It is great to have that fixed, but I don't think the benefit of this outweighs the drawbacks introduced regressions (and future limitations) by the new library. Would you consider a rollback? I assume that not too many projects are upgrading to the latest codeceptjs version right away, and many more projects will find their selectors broken in the coming weeks.

[kobenguyent]

hey @cjhille thinking of a hybrid solution for this.
I hope that would resolve our issue
Test build: https://www.npmjs.com/package/codeceptjs/v/3.5.12-beta.2
PR: #4141

[cjhille]

@kobenguyent Nice, wouldn't have thought of that ^^

Oddly, it still goes down the code path to the new lib for this locator:

deleteButton: locate('.p-confirm-popup:last-of-type button').withText('Delete')

Leading to:
SyntaxError: *-of-type pseudos require a tag context

[kobenguyent]

@kobenguyent Nice, wouldn't have thought of that ^^

Oddly, it still goes down the code path to the new lib for this locator:

deleteButton: locate('.p-confirm-popup:last-of-type button').withText('Delete')

Leading to:

SyntaxError: *-of-type pseudos require a tag context

I'm curious if that is the locator before the lib changed? Cause I remembered the old lib doesn't work with hyphen in locator.

[cjhille]

Yes, that locator works with 3.5.8.

[kobenguyent]

So that locator didn't have the issue #3563?

[cjhille]

yes, just tested this in isolation

[kobenguyent]

Thank you for your input. I understood the problem now. Thinking a nice solution for now.

[kobenguyent]

Soooo, another try, I hope we could resolve this this time. I could not think of any better solution right now but this hybrid approach would be a cheap and fast way right now.

We will check the locator and load either the old one which is being used until 3.5.8 css-to-xpath or the new one csstoxpath.

css-to-xpath: old lib, which works perfectly unless you have hyphen in locator. (#3563)
csstoxpath: new lib, to solve the issue locator with hyphen

Test build: https://www.npmjs.com/package/codeceptjs/v/3.5.12-beta.3

[cjhille]

After some layer 8 errors on my side, I'm positively certain that this PR fixes the regression. Thank you, @kobenguyent, for your patience.

[Horsty80]

Soooo, another try, I hope we could resolve this this time. I could not think of any better solution right now but this hybrid approach would be a cheap and fast way right now.

We will check the locator and load either the old one which is being used until 3.5.8 css-to-xpath or the new one csstoxpath.

css-to-xpath: old lib, which works perfectly unless you have hyphen in locator. (#3563) csstoxpath: new lib, to solve the issue locator with hyphen

Test build: https://www.npmjs.com/package/codeceptjs/v/3.5.12-beta.3

I confirm the beta 3.5.12 fix issue on selector that appears in 3.5.10

In 3.5.9 simple action like I.click("My anwesome link") is working

With 3.5.10 & 3.5.11 this action doesn't work.

Fixed with beta, hope it can be release soon 🤞