Playwright

{
  "lockfileVersion": 1,
  "configVersion": 1,
  "workspaces": {
    "": {
      "name": "playwright-skill",
      "dependencies": {
        "@playwright/test": "^1.55.0",
        "playwright": "^1.55.0",
      },
    },
  },
  "packages": {
    "@playwright/test": ["@playwright/test@1.57.0", "", { "dependencies": { "playwright": "1.57.0" }, "bin": { "playwright": "cli.js" } }, "sha512-6TyEnHgd6SArQO8UO2OMTxshln3QMWBtPGrOCgs3wVEmQmwyuNtB10IZMfmYDE0riwNR1cu4q+pPcxMVtaG3TA=="],

    "fsevents": ["fsevents@2.3.2", "", { "os": "darwin" }, "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA=="],

    "playwright": ["playwright@1.57.0", "", { "dependencies": { "playwright-core": "1.57.0" }, "optionalDependencies": { "fsevents": "2.3.2" }, "bin": { "playwright": "cli.js" } }, "sha512-ilYQj1s8sr2ppEJ2YVadYBN0Mb3mdo9J0wQ+UuDhzYqURwSoW4n1Xs5vs7ORwgDGmyEh33tRMeS8KhdkMoLXQw=="],

    "playwright-core": ["playwright-core@1.57.0", "", { "bin": { "playwright-core": "cli.js" } }, "sha512-agTcKlMw/mjBWOnD6kFZttAAGHgi/Nw0CZ2o6JqWSbMlI219lAFLZZCyqByTsvVAJq5XA5H8cA6PrvBRpBWEuQ=="],
  }
}


// Example: Fill and submit a form
const { chromium } = require('playwright');

const TARGET_URL = 'http://localhost:3000'; // Change as needed

(async () => {
  const browser = await chromium.launch({ headless: false, slowMo: 50 });
  const page = await browser.newPage();

  await page.goto(`${TARGET_URL}/contact`);

  // Fill form fields
  await page.fill('input[name="name"]', 'John Doe');
  await page.fill('input[name="email"]', 'john@example.com');
  await page.fill('textarea[name="message"]', 'This is a test message');

  // Submit form
  await page.click('button[type="submit"]');

  // Verify submission
  try {
    await page.waitForSelector('.success-message', { timeout: 5000 });
    console.log('✅ Form submitted successfully');
  } catch (e) {
    console.log('❌ Form submission failed or success message not found');
  }

  await browser.close();
})();


// Example: Check for broken links on a page
const { chromium } = require('playwright');

const TARGET_URL = 'http://localhost:3000'; // Change as needed

(async () => {
  const browser = await chromium.launch({ headless: false });
  const page = await browser.newPage();

  console.log(`Checking links on: ${TARGET_URL}\n`);
  await page.goto(TARGET_URL);

  // Get all links, then filter to http(s) only
  // Note: This excludes relative links (/about), mailto:, tel:, and #anchors
  const allLinks = await page.locator('a[href]').all();
  const httpLinks = [];

  for (const link of allLinks) {
    const href = await link.getAttribute('href');
    // Filter to only http(s) and protocol-relative links
    if (href && (href.startsWith('http://') || href.startsWith('https://') || href.startsWith('//'))) {
      httpLinks.push({ locator: link, href });
    }
  }

  console.log(`Found ${httpLinks.length} external http(s) links to check\n`);

  const results = { working: 0, broken: [] };

  for (const { locator: link, href } of httpLinks) {
    try {
      const response = await page.request.head(href);
      if (response.ok()) {
        results.working++;
        console.log(`✅ ${href}`);
      } else {
        results.broken.push({ url: href, status: response.status() });
        console.log(`❌ ${href} (Status: ${response.status()})`);
      }
    } catch (e) {
      results.broken.push({ url: href, error: e.message });
      console.log(`❌ ${href} (Error: ${e.message})`);
    }
  }

  console.log(`\n\n=== RESULTS ===`);
  console.log(`✅ Working links: ${results.working}`);
  console.log(`❌ Broken links: ${results.broken.length}`);

  if (results.broken.length > 0) {
    console.log('\nBroken link details:');
    console.log(JSON.stringify(results.broken, null, 2));
  }

  await browser.close();
})();


// Example: Test responsive design across multiple viewports
const { chromium } = require('playwright');

const TARGET_URL = 'http://localhost:3000'; // Change as neede