Select some text and press tab will check for the presence in the page

[dolfje]

Description

In test you want to check if some text is included in the page. That wasn't possible yet with the current recoder. I made it possible by selecting the text and then press the tab (so the key code). Then it will add a code block that will check if the selected text is present.

Type of change

Please delete options that are not relevant.

• [ ] Bug fix (non-breaking change which fixes an issue)
• [x] New feature (non-breaking change which adds functionality)
• [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
• [ ] This change requires a documentation update

How Has This Been Tested?

Please describe the tests that you ran to verify your changes.

Checklist:

• [x] My code follows the style guidelines of this project. npm run lint passes with no errors.
• [x] I have made corresponding changes to the documentation
• [ ] I have added tests that prove my fix is effective or that my feature works
• [x] New and existing unit tests pass locally with my changes. npm run test passes with no errors.

[ianaya89]

Related to https://github.com/checkly/headless-recorder/issues/87

[ianaya89]

I think this is really useful, but I am not sure if pressing tab will be the best approach (especially because tab is commonly used for page navigation). What do you think about a contextual menu? Pressing right click on the page could show up some options related to assertions.

I will add a PoC under this branch, so we can review it and compare

[dolfje]

I agree with contextual menu. But because "tab" is already used in the context of "marking input" from the user.

1. you typed text inside an input, then tab => the input of the text is confirmed and added to the scenario
2. you select some text, then tab => the selected text is confirmed and added to the scenario

[ianaya89]

https://github.com/checkly/headless-recorder/issues/232