I have a Chrome extension that adds an entry to the browser's context menu, that allows a user to copy the top-level heading of a page to the clipboard.
Example:
Given the following HTML:
<h1>My Page</h1>
Right clicking on the page, selecting Plugin Name > Copy Title, will copy the string "My Page" to the clipboard. This should only work on a specified domain.
I'd like to write tests to ascertain that:
- The context menu entry only appears on the specified domain
- When on the specified domain, if I right click the page and select "Copy Title" that the correct string (i.e. the page's title) is copied to the clipboard.
How do I do that?
I'm not asking for the code, just for which tools are best suited to this job and a vague idea of the best order to do things.
Update: I have installed webdriver.io and managed to load the extension. Triggering a right click on the page shows the context menu and I can see my extension listed. I cannot however find any way to interact with the context menu:
.rightClick()
.keys(["Down arrow", "Down arrow", "Enter"]).then(function(val) {
console.log(val);
});
The above snippet shows the context menu, but sending the "Down arrow" keys scrolls the page and doesn't cycle through the context menu options as I had hoped.
Does anyone know how to give the context menu focus?