cypress-documentation
                                
                                 cypress-documentation copied to clipboard
                                
                                    cypress-documentation copied to clipboard
                            
                            
                            
                        scrollIntoView doc page contains unsafe chains in examples
Subject
api
Description
https://docs.cypress.io/api/commands/scrollintoview states that "[i]t is unsafe to chain further commands that rely on the subject after .scrollIntoView()." However, two examples on the page chain .should('be.visible') on scrollIntoView. I think the examples should be updated to re-query the DOM before doing that assertion
Pinging @BlueWinds (hope that's an okay thing to do?) to check if this is indeed a desired documentation change
@JessefSpecialisterren - Yep, looks like we should update the examples here. If you'd like to submit a PR to update them, feel free to ping me there as well - otherwise, I'll see if I have a few minutes to get to it next week.
@BlueWinds I went and got started on fixing this, but ran into several things:
- One of the examples for scrollIntoViewcomes with a screenshot of the Command Log, which seems to come from cypress-example-kitchensink. I looked at that project and realized there were tons of unsafe chains in there
- I took a closer look at cypress-documentation and found unsafe chains in several more examples all over the place
- I looked up cypress-realworld-app and found lots of unsafe chains in there as well
This change in how commands are handled seems to have quite the avalanche of consequences 😅. I can't justify spending a lot of time on this; our project has a huge backlog, and for our purposes it's enough to know that Cypress examples are going to contain unsafe chains for a while
For the moment, I can offer the following:
- The suggestion to create issues about unsafe chains in the docs and examples repositories, so it's officially a known issue
- The regex I built to detect unsafe chains in our project:
\.(blur|check|clear|click|dblclick|each|focus|go|pause|reload|rightclick|screenshot|scrollIntoView|scrollTo|select|selectFile|spread|submit|then|trigger|type|uncheck|wait|within)\(([^()]|\n|\r|\(([^()]|\n|\r|\(([^()]|\n|\r)*\))*\))*\)[\n\r\s]*\.
Caveats:
- It's built for and tested in vscode
- It's hardcoded to support up to three levels of nested parentheses
- Depending on the code, it can find a lot of false positives
And I wanted to add that I appreciate the hard work and effort you've been putting into this change 🙂! I imagine you got a lot more than you bargained for when you started on it, but you've already moved a mountain and seem to be in the process of moving another one. Thank you for making this long-requested improvement happen!
@JessefSpecialisterren oh boy! This was a bit of a miss on our part on updating our examples that did this. The docs are harder to catch since we aren't running these tests 😅 Please, as you see examples, feel free to update and/or log issues for smaller pieces. Trying to do everything yourself could likely take quite a bit of time and totally understand you have other things as well. T