MCP & Copilot Agent Concepts

# Install Playwright MCP Server
npm install @playwright/mcp-server

# Or install globally
npm install -g @playwright/mcp-server

# Install Copilot Agent
npm install @github/copilot-agent

# Or install the CLI version
npm install -g @github/copilot-cli

// Create a simple setup file
import { PlaywrightMCPServer } from '@playwright/mcp-server';
import { CopilotAgent } from '@github/copilot-agent';

// Initialize Playwright MCP Server and Copilot Agent
const playwrightMCP = new PlaywrightMCPServer();
const copilotAgent = new CopilotAgent();

// Connect them together
await playwrightMCP.connect(copilotAgent);

console.log('✅ Playwright MCP Server and Copilot Agent are ready to use!');

// Step 1: You tell AI what to test
const userRequest = "Test the login functionality on my website";

// Step 2: AI uses Playwright MCP Server to control browser
const testResult = await playwrightMCP.runTest({
  request: userRequest,
  website: "https://learn-playwright.great-site.net",
  actions: [
    "Navigate to login page",
    "Fill email field with test@example.com",
    "Fill password field with password123",
    "Click login button",
    "Verify welcome message appears"
  ]
});

// Step 3: AI automatically executes the test
console.log("Test executed by AI:", testResult);

// What AI did through MCP Server:
/*
1. Opened Chrome browser
2. Navigated to https://learn-playwright.great-site.net
3. Found and clicked the login link
4. Filled in the email field
5. Filled in the password field
6. Clicked the login button
7. Took a screenshot of the result
8. Verified the welcome message appeared
9. Reported success/failure with details
*/

// Step 4: AI provides detailed report
console.log("AI Test Report:", testResult.report);
/*
{
  status: "PASSED",
  duration: "2.3 seconds",
  steps: [
    { step: "Navigate to login page", status: "PASSED" },
    { step: "Fill email field", status: "PASSED" },
    { step: "Fill password field", status: "PASSED" },
    { step: "Click login button", status: "PASSED" },
    { step: "Verify welcome message", status: "PASSED" }
  ],
  screenshot: "base64_screenshot_data"
}
*/

// Step 1: Your test fails
const failedTest = {
  testName: "Login Test",
  error: "Element not found: #email",
  testCode: "await page.fill('#email', 'test@example.com');"
};

// Step 2: AI uses MCP Server to investigate
const debugResult = await playwrightMCP.debugTest({
  failedTest: failedTest,
  website: "https://learn-playwright.great-site.net"
});

// Step 3: AI automatically investigates the issue
console.log("AI Debug Investigation:", debugResult);

// What AI did through MCP Server:
/*
1. Opened the website in browser
2. Took a screenshot of the current page
3. Analyzed the HTML structure
4. Found that the email field has id='username' not 'email'
5. Identified the correct selector
6. Tested the fix by filling the field
7. Generated the corrected test code
*/

// Step 4: AI provides the fix
console.log("AI Fix:", debugResult.fix);
/*
{
  issue: "Wrong selector used",
  explanation: "The email field has id='username', not 'email'",
  originalCode: "await page.fill('#email', 'test@example.com');",
  fixedCode: "await page.fill('#username', 'test@example.com');",
  confidence: 100,
  testScreenshot: "base64_screenshot_proving_fix_works"
}
*/

// Step 5: AI can automatically apply the fix
await playwrightMCP.applyFix({
  originalCode: failedTest.testCode,
  fixedCode: debugResult.fixedCode
});

// Step 1: You manually write test code
test('Login test', async ({ page }) => {
  await page.goto('https://learn-playwright.great-site.net');
  await page.click('#login');
  await page.fill('#email', 'test@example.com');
  await page.fill('#password', 'password123');
  await page.click('#submit');
  await page.waitForTimeout(3000);
  expect(page.locator('.welcome')).toBeVisible();
});

// Step 2: Test fails, you debug manually
// Error: Element not found: #login
// You spend 30 minutes figuring out the correct selector

// Step 3: You fix the selector manually
test('Login test', async ({ page }) => {
  await page.goto('https://learn-playwright.great-site.net');
  await page.click('text=Sign in'); // Fixed selector
  await page.fill('#email', 'test@example.com');
  await page.fill('#password', 'password123');
  await page.click('#submit');
  await page.waitForTimeout(3000);
  expect(page.locator('.welcome')).toBeVisible();
});

// Step 4: Test still fails, you debug again
// Error: Element not found: #submit
// You spend another 20 minutes finding the correct button selector

// Total time: 2+ hours for one simple test
// Problems: Manual debugging, unreliable selectors, hard-coded waits

// Step 1: You describe what you want in plain English
const request = "Create a login test for the website";

// Step 2: Copilot Agent generates perfect test code automatically
const generatedTest = await copilotAgent.generateCode({
  request: request,
  framework: "playwright",
  website: "https://learn-playwright.great-site.net"
});

// Step 3: Agent returns optimized, working test
console.log("Generated test:", generatedTest.code);

/*
Generated Code (Perfect from the start):
test('Login test', async ({ page }) => {
  await page.goto('https://learn-playwright.great-site.net');
  
  // Uses reliable selectors
  await page.getByRole('link', { name: 'Sign in' }).click();
  await page.getByLabel('Email address').fill('test@example.com');
  await page.getByLabel('Password').fill('password123');
  await page.getByRole('button', { name: 'Sign in' }).click();
  
  // Proper waits and assertions
  await expect(page.getByText('Welcome')).toBeVisible();
  await expect(page).toHaveURL(/dashboard/);
});
*/

// Step 4: If test fails, agent fixes it automatically
const fixedTest = await copilotAgent.fixBug({
  testCode: generatedTest.code,
  error: "Any error that occurs"
});

// Total time: 5 minutes for perfect test
// Benefits: Automatic generation, reliable selectors, proper waits, auto-fixing

// Step 1: You have an Excel file with test data
const testDataExcel = {
  file: "test-data.xlsx",
  data: [
    { testName: "Login Test", username: "user1@test.com", password: "pass123", expectedResult: "Success" },
    { testName: "Search Test", searchTerm: "dress", expectedResults: "5 products" },
    { testName: "Cart Test", product: "Summer Dress", quantity: "2", expectedTotal: "$59.98" }
  ]
};

// Step 2: Send Excel data to Copilot Agent via Playwright MCP Server
const request = "Create and run Playwright tests using this Excel data";

// Step 3: Copilot Agent uses MCP Server to generate AND execute tests
const testResults = await copilotAgent.generateAndRunTests({
  excelData: testDataExcel,
  mcpServer: playwrightMCP,
  website: "https://learn-playwright.great-site.net"
});

// Step 4: AI automatically runs the tests and provides results
console.log("Test execution results:", testResults);

/*
What happened automatically:

1. AI read the Excel data
2. AI used Playwright MCP Server to open the website
3. AI generated test code for each row in Excel
4. AI executed each test using the MCP Server
5. AI provided detailed results for each test

Results:
{
  "Login Test": {
    status: "PASSED",
    duration: "1.8s",
    screenshot: "login_success.png",
    details: "Successfully logged in with user1@test.com"
  },
  "Search Test": {
    status: "PASSED", 
    duration: "2.1s",
    screenshot: "search_results.png",
    details: "Found 5 products matching 'dress'"
  },
  "Cart Test": {
    status: "PASSED",
    duration: "3.2s", 
    screenshot: "cart_total.png",
    details: "Added 2 Summer Dresses, total: $59.98"
  }
}
*/

// That's it! AI automatically created, ran, and verified all tests from your Excel data

// Benefits in action
const benefits = {
  speed: {
    description: "10x faster test development",
    example: "What used to take 2 hours now takes 12 minutes"
  },
  
  quality: {
    description: "Higher quality, more reliable tests",
    example: "AI follows Playwright best practices automatically"
  },
  
  automation: {
    description: "Fully automated test execution",
    example: "AI can run tests, take screenshots, and debug issues"
  },
  
  learning: {
    description: "Continuous improvement",
    example: "Agent learns from your website and gets better at testing it"
  },
  
  scalability: {
    description: "Easy to scale across projects",
    example: "One MCP Server setup works for all your websites"
  }
};

console.log("Integration benefits:", benefits);

// Real-world impact
const impact = {
  timeSaved: "80% reduction in test development time",
  qualityImprovement: "60% fewer test failures",
  automationLevel: "100% automated test execution and debugging",
  teamProductivity: "3x more tests per developer",
  maintenanceReduction: "50% less time spent on test maintenance"
};

console.log("Real-world impact:", impact);