docs: selenium tutorial (#2175)

2025-12-17 14:14:26 +01:00 · 2025-04-12 17:04:42 -05:00
parent b1bf9d7173
commit da42a46581
1 changed files with 164 additions and 0 deletions
--- a/documentation/docs/tutorials/selenium-mcp.md
+++ b/documentation/docs/tutorials/selenium-mcp.md
@@ -0,0 +1,164 @@
+---
+title: Selenium Extension
+description: Add Selenium MCP Server as a Goose Extension
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+import YouTubeShortEmbed from '@site/src/components/YouTubeShortEmbed';
+
+<!-- <YouTubeShortEmbed videoUrl="https://www.youtube.com/embed/VIDEO_ID" /> -->
+
+
+This tutorial covers how to add the [Selenium MCP Server](https://github.com/angiejones/mcp-selenium) as a Goose extension to automate browser interactions such as navigating web pages and completing forms.
+
+
+:::tip TLDR
+
+**Command**
+```sh
+npx -y @angiejones/mcp-selenium
+```
+:::
+
+## Configuration
+
+:::info
+Note that you'll need [Node.js](https://nodejs.org/) installed on your system to run this command, as it uses `npx`.
+:::
+
+
+<Tabs groupId="interface">
+  <TabItem value="cli" label="Goose CLI" default>
+  1. Run the `configure` command:
+  ```sh
+  goose configure
+  ```
+
+  2. Choose to add a `Command-line Extension`
+  ```sh
+    ┌   goose-configure 
+    │
+    ◇  What would you like to configure?
+    │  Add Extension 
+    │
+    ◆  What type of extension would you like to add?
+    │  ○ Built-in Extension 
+    // highlight-start    
+    │  ● Command-line Extension (Run a local command or script)
+    // highlight-end    
+    │  ○ Remote Extension 
+    └ 
+  ```
+
+  3. Give your extension a name
+  ```sh
+    ┌   goose-configure 
+    │
+    ◇  What would you like to configure?
+    │  Add Extension 
+    │
+    ◇  What type of extension would you like to add?
+    │  Command-line Extension 
+    │
+    // highlight-start
+    ◆  What would you like to call this extension?
+    │  Selenium
+    // highlight-end
+    └ 
+  ```
+
+  4. Enter the command
+  ```sh
+    ┌   goose-configure 
+    │
+    ◇  What would you like to configure?
+    │  Add Extension 
+    │
+    ◇  What type of extension would you like to add?
+    │  Command-line Extension 
+    │
+    ◇  What would you like to call this extension?
+    │  Selenium
+    │
+    // highlight-start
+    ◆  What command should be run?
+    │  npx -y @angiejones/mcp-selenium
+    // highlight-end
+    └ 
+  ```  
+
+  5. Enter the number of seconds Goose should wait for actions to complete before timing out. Default is 300s
+    ```sh
+    ┌   goose-configure 
+    │
+    ◇  What would you like to configure?
+    │  Add Extension 
+    │
+    ◇  What type of extension would you like to add?
+    │  Command-line Extension 
+    │
+    ◇  What would you like to call this extension?
+    │  Selenium
+    │
+    ◇  What command should be run?
+    │  npx -y @angiejones/mcp-selenium
+    │
+    // highlight-start
+    ◆  Please set the timeout for this tool (in secs):
+    │  300
+    // highlight-end
+    │
+    └ 
+  ``` 
+  
+  6. Choose No when asked to add environment variables
+
+   ```sh
+    ┌   goose-configure 
+    │
+    ◇  What would you like to configure?
+    │  Add Extension 
+    │
+    ◇  What type of extension would you like to add?
+    │  Command-line Extension 
+    │
+    ◇  What would you like to call this extension?
+    │  Selenium
+    │
+    ◇  What command should be run?
+    │  npx -y @angiejones/mcp-selenium
+    │     
+    ◇  Please set the timeout for this tool (in secs):
+    │  300
+    │    
+    // highlight-start
+    ◆  Would you like to add environment variables?
+    │  No 
+    │
+    // highlight-end
+    └  Added Selenium extension
+  ```  
+
+  </TabItem>
+  <TabItem value="ui" label="Goose Desktop">
+  1. [Launch the installer](goose://extension?cmd=npx&arg=-y&arg=%40angiejones%2Fmcp-selenium&id=selenium-mcp&name=Selenium%20MCP&description=automates%20browser%20interactions)
+  2. Press `Yes` to confirm the installation
+  3. Click `Save Configuration`
+  5. Scroll to the top and click `Exit` from the upper left corner
+  </TabItem>
+</Tabs>
+
+## Example Usage
+
+Let's use Goose to build a test automation project from scratch! We'll use the Selenium MCP to automate filling out a web form, then have Goose generate a Selenium project with the code so that we can run these tests again when needed.
+
+
+### Goose Prompt
+
+> Use selenium to go to the heroku formy site and fill out the form page with generic data. then can you turn what you've done into an automation script for me? I would like it in Java. Also use the Page Object Model pattern.
+
+
+### Goose Output
+
+<iframe class="aspect-ratio" src="https://www.youtube.com/embed/mRV0N8hcgYA?start=28&end=152" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>