Ordered interaction selectors
- Dominant language
- JavaScript
- Stars
- 7.2k
- Forks
- 621
- PR merge metrics
- No merged PRs in 30d
Description
We have a couple scenarios we want our testers to be able to create with the currently available selectors in the configuration options. But they aren't yet able to do so because of the sequential order of these selectors (`clickSelector`, `hoverSelector`, etc...) in [clickAndHoverHelper.js](https://github.com/garris/BackstopJS/blob/930b3c863d3946fd3c8156166692739479ad51c7/capture/engine_scripts/puppet/clickAndHoverHelper.js).
@garris Would you be open to extending the currently available configuration options of interaction selectors to an ordered variant? Or is there a specific reason why the configuration options has not yet been setup this way?
_(I could have created custom scripts for our specific scenarios, but I think it might be valuable for more users.)_
Some examples which currently seem impossible:
- Clicking after scrolling
1. Scroll past the header/navigation to make a sticky positioned element visible
2. Click on a button in the sticky element
- Typing after clicking/hovering
1. Click/hover a button to open a dialog/tooltip
2. Type in an input
- Typing after waiting for errors after submitting
1. Click submit button
2. Wait for error message element
3. Type in input to fix the error
4. Click submit button
I think these type of scenarios could be possible by adding one new `actions` _(or differently named)_ configuration option in which the order of selectors can be configured.
An example of such scenarios:
```json
{
"actions": [
{
"scrollToSelector": "main"
},
{
"clickSelector": "button.open-form-dialog"
},
{
"keyPressSelectors": [
{
"selector": ".dialog input[name=\"firstname\"]",
"keyPress": "H"
},
{
"selector": ".dialog input[name=\"firstname\"]",
"keyPress": "i"
}
]
},
{
"clickSelector": ".dialog button[type=\"submit\"]"
},
{
"readySelector": ".dialog .error-message",
"keyPressSelectors": [
{
"selector": ".dialog input[name=\"surname\"]",
"keyPress": "O"
},
{
"selector": ".dialog input[name=\"surname\"]",
"keyPress": "k"
}
]
},
{
"clickSelector": ".dialog button[type=\"submit\"]"
}
]
}
```
Contributor guide
Research direction
Start by reading capture/engine_scripts/puppet/clickAndHoverHelper.js and tracing how the existing interaction selectors are read from configuration. Check how the current selectors are executed and what tests cover them. Done should support the ordered interaction scenarios described in the issue without removing existing selector behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- testing-qa
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100