Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/catchpoint/webpagetest.slack
WebPageTest and Slack Integration
https://github.com/catchpoint/webpagetest.slack
Last synced: about 1 month ago
JSON representation
WebPageTest and Slack Integration
- Host: GitHub
- URL: https://github.com/catchpoint/webpagetest.slack
- Owner: catchpoint
- License: apache-2.0
- Created: 2021-05-17T16:54:59.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-03-01T12:11:29.000Z (almost 2 years ago)
- Last Synced: 2024-07-10T22:03:45.171Z (6 months ago)
- Language: JavaScript
- Size: 610 KB
- Stars: 21
- Watchers: 5
- Forks: 4
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Learn about more WebPageTest API Integrations in our docs
# WebPageTest Slack Bot
[](/LICENSE)
The WebPageTest Slack bot lets you run tests against WebPageTest from within Slack. Once the tests are complete, a copy of the waterfall and a link to the full results will be posted in your Slack channel, helping you to easily troubleshoot and diagnose performance issues directly from your Slack development channels.
**Features:**
- Run WebPageTest from within Slack, and get the results posted back automatically.
- Full access to WebPageTest's 30+ test locations.
## Installing the Slack Bot
### 1. Creating the Slack App
1. [Create a Slack app](https://api.slack.com/apps/new) for your workspace and choose "From Scratch" for the application type.
2. Set the App Name (might we suggest the simple, yet accurate, "WebPageTest") and make sure you've selected the workspace you want to add the application to.
3. Next, you need to get the Slack token to be referenced in the Node server that will handle all the testing. Navigate to the "OAuth and Permissions" page (found in the sidebar of the Slack navigation). Before you Install the application to the workspace, you'll need to set the Bot Token Scope to "chat:write".
4. After you've set the Bot Token scope, click "Install to Workspace". The application will be installed and you'll be provided with an oAuth Token for the bot. Rename .env.example to .env in the root directory, Copy this token and paste it under .env file SLACK_BOT_TOKEN = "YOUR_SLACK_TOKEN".
5. You will also be needing the SLACK_SIGNING_SECRET. On the left Sidebar Go to `Basic information` and under App Credentials copy the Signing Secret and paste it under .env file SLACK_SIGNING_SECRET.
### 2. Setting up the Node Server
The logic that submits tests to WebPageTest and returns the results back to Slack is handled by a Node server that you'll need to have running somewhere that Slack can access. Here's how to get that running.
1. Clone this repository to the location you want to run the Node server from and run `npm install` to install all the dependencies.
```bash
npm install
```
2. Run `npm start` to start the server.
```bash
npm start
```
If you get response like "⚡️ Webpagetest Slack app is running!", server has been successfully setup. If your node server is publicly accessible, you're good to move on with the final configuration of the Slack bot. If it's not, [you can use ngrok to make the server accessible](#optional-use-ngrok-to-make-the-server-publicly-accessible).
### 3. Final configuration of Slack Bot
The Node server provides an API endpoint used to handle requests.
- The "/slack/events" path will be used for slash commands in Slack to trigger tests and for all the interactions.
The final step is to use set the Slack bot to use these URL's.
1. Navigate to the "Slash Commands" page for your application (found in the sidebar of the Slack navigation) and "Create a New Command" with the following settings:
- **Command:** /webpagetest
- **Request URL:** The full URL for the "/slack/events" endpoint of your server.
- **Short Description:** Runs WebPageTest
- **Usage Hint:** [url to test]
2. Add one more command with the following settings:
- **Command:** /update
- **Request URL:** The full URL for the "/slack/events" endpoint of your server.
- **Short Description:** To update webpagetest api key
- **Usage Hint:** [API KEY]
3. Navigate to the "Interactivity & Shortcuts" page for your application (found in the sidebar of the Slack navigation), enable Interactivity, and then provide the full URL to the "/slack/events" endpoint for your server.
_Once you have added the slash command and interactivity URL, you might be asked to reinstall your app, please do it to apply the necessary changes for your app._
4. Finally, in Slack, you'll need to add WebPageTest to the channel you want to be able to run tests from. You can do this by starting to type "add apps", selecting "Add apps to this channel", then clicking "Install" next to the WebPageTest application.
5. **Optional** You can also set a custom app icon for the app by navigating to the "Basic Information" page for your application (found in the sidebar of the Slack navigation) and adding the icon under "Display Information". We've provided [an icon for you in the repository that you can use](https://github.com/WebPageTest/webpagetest-slack/blob/master/webpagetest.png).
## Running the Slack Bot
With the server running and the Slack application configured, you're ready to start testing!
1. Type /webpagetest in Slack. You should see a box recommending the WebPageTest app.
2. Add the URL you want to test and press enter. For example:
`/webpagetest https://webpagetest.org`
3. A modal box will be displayed letting you customize the test by selecting a WebPageTest testing location and browser, a connectivity profile, and (optionally) mobile emulation. And an additional API key field for first time users.
4. After you hit "Submit", the WebPageTest application will first post a message letting you know the test has been submitted. Once the test is complete, the WebPageTest app will add another message with a thumbnail of the waterfall and a link to the full WebPageTest results.
5. To update the Webpagetest API key use `/update [API key]` slash command.
## Optional: Use ngrok to make the server publicly accessible
By default, the Node server runs on port 5000 on localhost. You can use ngrok to make the server accessible to the Slack servers if your Node server is not already publicly accessible.
1. Install and start [ngrok](https://ngrok.com/download)
2. After installing ngrok run "ngrok http 5000"
```bash
ngrok http 5000
```
4. This creates a tunnel and returns a public URL for accessing the server.
From here, the steps for [configuring the app are the same](#3-final-configuration-of-slack-bot).
---