mirror of
https://github.com/github/awesome-copilot.git
synced 2026-03-13 12:45:13 +00:00
content review (#995)
* Cleaned up some tool names * Removing some instructionsThese instructions are no longer useful as the knowledge the add is already well handled by frontier models, so the instructions potentially provide conflicting or incorrect information to the agent while it undertakes a task * Improved the skill to be more explicit on how to use playwright * Removing a skill that is of low value The information captured in this skill is mostly just what is found in the links that are at the top of the references, and thus the model will already have that knowledge available to it, meaning that the skill will potentially provide conflicting guidance to the agent as it works * Updating readmes
This commit is contained in:
@@ -7,9 +7,12 @@ description: Toolkit for interacting with and testing local web applications usi
|
||||
|
||||
This skill enables comprehensive testing and debugging of local web applications using Playwright automation.
|
||||
|
||||
You should use the Playwright MCP Server to undertake the work if possible. If the MCP Server is unavailable, you can run the code in a local Node.js environment with Playwright installed.
|
||||
|
||||
## When to Use This Skill
|
||||
|
||||
Use this skill when you need to:
|
||||
|
||||
- Test frontend functionality in a real browser
|
||||
- Verify UI behavior and interactions
|
||||
- Debug web application issues
|
||||
@@ -27,6 +30,7 @@ Use this skill when you need to:
|
||||
## Core Capabilities
|
||||
|
||||
### 1. Browser Automation
|
||||
|
||||
- Navigate to URLs
|
||||
- Click buttons and links
|
||||
- Fill form fields
|
||||
@@ -34,6 +38,7 @@ Use this skill when you need to:
|
||||
- Handle dialogs and alerts
|
||||
|
||||
### 2. Verification
|
||||
|
||||
- Assert element presence
|
||||
- Verify text content
|
||||
- Check element visibility
|
||||
@@ -41,6 +46,7 @@ Use this skill when you need to:
|
||||
- Test responsive behavior
|
||||
|
||||
### 3. Debugging
|
||||
|
||||
- Capture screenshots
|
||||
- View console logs
|
||||
- Inspect network requests
|
||||
@@ -49,26 +55,29 @@ Use this skill when you need to:
|
||||
## Usage Examples
|
||||
|
||||
### Example 1: Basic Navigation Test
|
||||
|
||||
```javascript
|
||||
// Navigate to a page and verify title
|
||||
await page.goto('http://localhost:3000');
|
||||
await page.goto("http://localhost:3000");
|
||||
const title = await page.title();
|
||||
console.log('Page title:', title);
|
||||
console.log("Page title:", title);
|
||||
```
|
||||
|
||||
### Example 2: Form Interaction
|
||||
|
||||
```javascript
|
||||
// Fill out and submit a form
|
||||
await page.fill('#username', 'testuser');
|
||||
await page.fill('#password', 'password123');
|
||||
await page.fill("#username", "testuser");
|
||||
await page.fill("#password", "password123");
|
||||
await page.click('button[type="submit"]');
|
||||
await page.waitForURL('**/dashboard');
|
||||
await page.waitForURL("**/dashboard");
|
||||
```
|
||||
|
||||
### Example 3: Screenshot Capture
|
||||
|
||||
```javascript
|
||||
// Capture a screenshot for debugging
|
||||
await page.screenshot({ path: 'debug.png', fullPage: true });
|
||||
await page.screenshot({ path: "debug.png", fullPage: true });
|
||||
```
|
||||
|
||||
## Guidelines
|
||||
@@ -84,26 +93,30 @@ await page.screenshot({ path: 'debug.png', fullPage: true });
|
||||
## Common Patterns
|
||||
|
||||
### Pattern: Wait for Element
|
||||
|
||||
```javascript
|
||||
await page.waitForSelector('#element-id', { state: 'visible' });
|
||||
await page.waitForSelector("#element-id", { state: "visible" });
|
||||
```
|
||||
|
||||
### Pattern: Check if Element Exists
|
||||
|
||||
```javascript
|
||||
const exists = await page.locator('#element-id').count() > 0;
|
||||
const exists = (await page.locator("#element-id").count()) > 0;
|
||||
```
|
||||
|
||||
### Pattern: Get Console Logs
|
||||
|
||||
```javascript
|
||||
page.on('console', msg => console.log('Browser log:', msg.text()));
|
||||
page.on("console", (msg) => console.log("Browser log:", msg.text()));
|
||||
```
|
||||
|
||||
### Pattern: Handle Errors
|
||||
|
||||
```javascript
|
||||
try {
|
||||
await page.click('#button');
|
||||
await page.click("#button");
|
||||
} catch (error) {
|
||||
await page.screenshot({ path: 'error.png' });
|
||||
await page.screenshot({ path: "error.png" });
|
||||
throw error;
|
||||
}
|
||||
```
|
||||
@@ -114,3 +127,7 @@ try {
|
||||
- Cannot test native mobile apps (use React Native Testing Library instead)
|
||||
- May have issues with complex authentication flows
|
||||
- Some modern frameworks may require specific configuration
|
||||
|
||||
## Helper Functions
|
||||
|
||||
Some helper functions are available in [`test-helper.js`](./assets/test-helper.js) to simplify common tasks like waiting for elements, capturing screenshots, and handling errors. You can import and use these functions in your tests to improve readability and maintainability.
|
||||
|
||||
Reference in New Issue
Block a user