laravel / dusk

Laravel Dusk provides simple end-to-end testing and browser automation.
https://laravel.com/docs/dusk
MIT License
1.87k stars 319 forks source link

Allow `dusk` attribute selectors to be chained #1034

Closed JayBizzle closed 1 year ago

JayBizzle commented 1 year ago

I have come across a few situations when writing Dusk tests where I use the dusk attribute selector on a wrapper div, then want to select elements within that div...

e.g.

<div dusk="all-items">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
</div>

And I was hoping I could do something like this...

$items = $browser->elements('@all-items > div');

foreach($items as $item){
    // assert something
}

...but this doesn't work because the selector gets compiled to [dusk="all-items > div"]

This PR makes this selector get compiled to [dusk="all-items"] > div

Bonus

Also allows multiple dusk attribute selectors to work as expected

This selector...

@item-list > div:nth-child(2) @submit-button

becomes...

[dusk="item-list"] > div:nth-child(2) [dusk="submit-button"]
patrickomeara commented 1 year ago

This has broken dusk selectors with spaces.

JayBizzle commented 1 year ago

This has broken dusk selectors with spaces.

Thanks for reporting, will submit a fix when I get the the office in a couple of hours 👍🏻

patrickomeara commented 1 year ago

@JayBizzle No troubles. In my opinion the functionality that you have added here is worth the breaking change. I'd be interested to see how wide spread the space issue is. Swapping my spaces out won't be too much work, it's mainly for selecting submenus in react components. A breaking change nonetheless. Thanks for the quick response.

JayBizzle commented 1 year ago

Just working on this now. Allowing spaces isn't an issue.

Characters we can't allow (that I can see using regex) are CSS chaining chars like ., >, & etc otherwise things like this won't work...

@dusk selector .class
@dusk selector > div

PR will be ready in about 10 mins

patrickomeara commented 1 year ago

I think that would go against the descendant CSS selector spec. ie if you are trying to target descendants of a selector

<div dusk="all-items">
    <div>Item 1</div>
    <div>Item 2</div>
    <div>Item 3</div>
    <div>Item 4</div>
</div>

You could rightfully use @all-items div, using spaces would break this @all items div.

JayBizzle commented 1 year ago

Yes, that is the problem I have hit with the solution. There doesn't seem to be a way around that unfortunately.

See #1035 to continue discussion 👍

driesvints commented 1 year ago

@patrickomeara seems Taylor has decided to continue with this PR, sorry.