<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Anirban Majumdar</title>
    <description>The latest articles on DEV Community by Anirban Majumdar (@anirseven).</description>
    <link>https://dev.to/anirseven</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F661142%2Ff351b9b8-d87f-4385-b8a3-28e69c3935ac.jpeg</url>
      <title>DEV Community: Anirban Majumdar</title>
      <link>https://dev.to/anirseven</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/anirseven"/>
    <language>en</language>
    <item>
      <title>Setting Up a Java Project in VS Code - TestNG</title>
      <dc:creator>Anirban Majumdar</dc:creator>
      <pubDate>Sat, 14 Mar 2026 15:55:21 +0000</pubDate>
      <link>https://dev.to/anirseven/setting-up-a-java-project-in-vs-code-testng-5d6f</link>
      <guid>https://dev.to/anirseven/setting-up-a-java-project-in-vs-code-testng-5d6f</guid>
      <description>&lt;h1&gt;
  
  
  Setting Up a Java Project in VS Code: A Step-by-Step Guide
&lt;/h1&gt;

&lt;h2&gt;
  
  
  Introduction
&lt;/h2&gt;

&lt;p&gt;In this guide, I’ll walk you through setting up a modern Java project using Maven and TestNG in Visual Studio Code (VS Code). We’ll cover everything from project creation to running your first test, leveraging the VS Code Java Extension Pack for a seamless experience.&lt;/p&gt;




&lt;h2&gt;
  
  
  1. Installing the VS Code Java Extension Pack
&lt;/h2&gt;

&lt;p&gt;To get started, install the &lt;a href="https://marketplace.visualstudio.com/items?itemName=vscjava.vscode-java-pack" rel="noopener noreferrer"&gt;Java Extension Pack by Microsoft&lt;/a&gt; in VS Code. This pack includes essential tools for Java development, such as language support, debugging, and Maven integration.&lt;/p&gt;




&lt;h2&gt;
  
  
  2. Creating a Maven Project
&lt;/h2&gt;

&lt;p&gt;Open VS Code and launch the integrated terminal. Run the following command to generate a Maven project using the quickstart archetype:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;mvn org.apache.maven.plugins:maven-archetype-plugin:3.1.2:generate &lt;span class="se"&gt;\&lt;/span&gt;
  &lt;span class="nt"&gt;-DarchetypeArtifactId&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"maven-archetype-quickstart"&lt;/span&gt; &lt;span class="se"&gt;\&lt;/span&gt;
  &lt;span class="nt"&gt;-DarchetypeGroupId&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"org.apache.maven.archetypes"&lt;/span&gt; &lt;span class="se"&gt;\&lt;/span&gt;
  &lt;span class="nt"&gt;-DarchetypeVersion&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"1.4"&lt;/span&gt; &lt;span class="se"&gt;\&lt;/span&gt;
  &lt;span class="nt"&gt;-DgroupId&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"com.example"&lt;/span&gt; &lt;span class="se"&gt;\&lt;/span&gt;
  &lt;span class="nt"&gt;-DartifactId&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="s2"&gt;"tutorial"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This creates a project structure with &lt;code&gt;src/main/java&lt;/code&gt; and &lt;code&gt;src/test/java&lt;/code&gt; folders, and a &lt;code&gt;pom.xml&lt;/code&gt; for dependency management.&lt;/p&gt;




&lt;h2&gt;
  
  
  3. Setting Up TestNG
&lt;/h2&gt;

&lt;p&gt;To use TestNG for testing, add the TestNG dependency to your &lt;code&gt;pom.xml&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight xml"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;dependency&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;groupId&amp;gt;&lt;/span&gt;org.testng&lt;span class="nt"&gt;&amp;lt;/groupId&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;artifactId&amp;gt;&lt;/span&gt;testng&lt;span class="nt"&gt;&amp;lt;/artifactId&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;version&amp;gt;&lt;/span&gt;7.8.0&lt;span class="nt"&gt;&amp;lt;/version&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;scope&amp;gt;&lt;/span&gt;test&lt;span class="nt"&gt;&amp;lt;/scope&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/dependency&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  4. Creating a SimpleTest Class
&lt;/h2&gt;

&lt;p&gt;Inside &lt;code&gt;src/test/java/com/example/&lt;/code&gt;, create a file named &lt;code&gt;simpleTest.java&lt;/code&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight java"&gt;&lt;code&gt;&lt;span class="kn"&gt;package&lt;/span&gt; &lt;span class="nn"&gt;com.example&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;

&lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="nn"&gt;org.testng.annotations.Test&lt;/span&gt;&lt;span class="o"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;public&lt;/span&gt; &lt;span class="kd"&gt;class&lt;/span&gt; &lt;span class="nc"&gt;simpleTest&lt;/span&gt; &lt;span class="o"&gt;{&lt;/span&gt;
    &lt;span class="nd"&gt;@Test&lt;/span&gt;
    &lt;span class="kd"&gt;public&lt;/span&gt; &lt;span class="kt"&gt;void&lt;/span&gt; &lt;span class="nf"&gt;testMethod&lt;/span&gt;&lt;span class="o"&gt;()&lt;/span&gt; &lt;span class="o"&gt;{&lt;/span&gt;
        &lt;span class="nc"&gt;System&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;out&lt;/span&gt;&lt;span class="o"&gt;.&lt;/span&gt;&lt;span class="na"&gt;println&lt;/span&gt;&lt;span class="o"&gt;(&lt;/span&gt;&lt;span class="s"&gt;"TestNG is running!"&lt;/span&gt;&lt;span class="o"&gt;);&lt;/span&gt;
    &lt;span class="o"&gt;}&lt;/span&gt;
&lt;span class="o"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  5. Configuring testng.xml
&lt;/h2&gt;

&lt;p&gt;Create a &lt;code&gt;testng.xml&lt;/code&gt; file in your project root to specify which tests to run:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight xml"&gt;&lt;code&gt;&lt;span class="cp"&gt;&amp;lt;?xml version="1.0" encoding="UTF-8"?&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;suite&lt;/span&gt; &lt;span class="na"&gt;name=&lt;/span&gt;&lt;span class="s"&gt;"Tutorial Suite"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;test&lt;/span&gt; &lt;span class="na"&gt;name=&lt;/span&gt;&lt;span class="s"&gt;"SimpleTest"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
        &lt;span class="nt"&gt;&amp;lt;classes&amp;gt;&lt;/span&gt;
            &lt;span class="nt"&gt;&amp;lt;class&lt;/span&gt; &lt;span class="na"&gt;name=&lt;/span&gt;&lt;span class="s"&gt;"com.example.simpleTest"&lt;/span&gt;&lt;span class="nt"&gt;/&amp;gt;&lt;/span&gt;
        &lt;span class="nt"&gt;&amp;lt;/classes&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;/test&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/suite&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  6. Updating pom.xml for TestNG
&lt;/h2&gt;

&lt;p&gt;Ensure your &lt;code&gt;pom.xml&lt;/code&gt; includes the TestNG dependency and is set up for Java 21 (LTS):&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight xml"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;properties&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;maven.compiler.source&amp;gt;&lt;/span&gt;21&lt;span class="nt"&gt;&amp;lt;/maven.compiler.source&amp;gt;&lt;/span&gt;
    &lt;span class="nt"&gt;&amp;lt;maven.compiler.target&amp;gt;&lt;/span&gt;21&lt;span class="nt"&gt;&amp;lt;/maven.compiler.target&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/properties&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  7. Running Your Tests
&lt;/h2&gt;

&lt;p&gt;Build and run your tests using Maven:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;mvn &lt;span class="nb"&gt;test&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;You should see output from your &lt;code&gt;simpleTest&lt;/code&gt; class, confirming TestNG is working.&lt;/p&gt;




&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;With VS Code, Maven, and TestNG, you have a powerful setup for Java development. The Java Extension Pack streamlines your workflow, and TestNG makes testing easy. Happy coding!&lt;/p&gt;

</description>
      <category>vscode</category>
      <category>vscodesetup</category>
      <category>javatestng</category>
      <category>testing</category>
    </item>
    <item>
      <title>Demystifying Promises, Async, and Await in JavaScript/TypeScript with Playwright and Cypress</title>
      <dc:creator>Anirban Majumdar</dc:creator>
      <pubDate>Fri, 29 Aug 2025 09:54:41 +0000</pubDate>
      <link>https://dev.to/anirseven/demystifying-promises-async-and-await-in-javascripttypescript-with-playwright-and-cypress-2g3i</link>
      <guid>https://dev.to/anirseven/demystifying-promises-async-and-await-in-javascripttypescript-with-playwright-and-cypress-2g3i</guid>
      <description>&lt;p&gt;One of the most common challenges for automation engineers using JavaScript/TypeScript is handling asynchronous code. Whether you’re writing tests in Playwright or Cypress, you’ll often deal with actions that don’t resolve instantly — such as page navigation, element interactions, or API calls.&lt;/p&gt;

&lt;p&gt;That’s where Promises, async, and await come in. Let’s break them down with automation-specific examples.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What is a Promise?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;A Promise represents the eventual completion (or failure) of an asynchronous operation. Think of it like a “contract” — “I’ll give you the data when it’s ready.”&lt;/p&gt;

&lt;p&gt;Example: Fetching Data&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const dataPromise = fetch('https://api.github.com/users');
dataPromise.then(response =&amp;gt; response.json())
           .then(data =&amp;gt; console.log(data));

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;In test automation, every browser action is often a Promise.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Async &amp;amp; Await Simplified&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;async marks a function as asynchronous.&lt;/p&gt;

&lt;p&gt;await pauses the function until the Promise is resolved.&lt;/p&gt;

&lt;p&gt;This makes code look synchronous and much easier to read.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Using Async/Await in Playwright&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Playwright heavily relies on async/await. Almost every browser interaction returns a Promise.&lt;/p&gt;

&lt;p&gt;Example: Playwright Test with Async/Await&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import { test, expect } from '@playwright/test';

test('Search on Amazon', async ({ page }) =&amp;gt; {
  await page.goto('https://www.amazon.com');
  await page.fill('#twotabsearchtextbox', 'Laptop');
  await page.click('input[type="submit"]');

  const results = page.locator('span.a-size-medium');
  await expect(results.first()).toBeVisible();
});

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Notice how await makes each step sequential and readable.&lt;br&gt;
Without it, you’d be chaining .then() everywhere, making tests messy.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Using Async/Await in Cypress&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Cypress is slightly different — it uses built-in command chaining instead of raw async/await. Cypress commands like &lt;code&gt;cy.get()&lt;/code&gt; and &lt;code&gt;cy.click()&lt;/code&gt; are asynchronous but auto-managed.&lt;/p&gt;

&lt;p&gt;Example: Cypress Test with Implicit Async Handling&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;describe('Search on Amazon', () =&amp;gt; {
  it('should search for Laptop', () =&amp;gt; {
    cy.visit('https://www.amazon.com');
    cy.get('#twotabsearchtextbox').type('Laptop');
    cy.get('input[type="submit"]').click();
    cy.get('span.a-size-medium').first().should('be.visible');
  });
});

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Here, Cypress internally queues commands and resolves them without you writing await.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Mixing Promises with Playwright&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Sometimes you need to handle multiple promises, e.g., waiting for API + UI events together.&lt;/p&gt;

&lt;p&gt;Example: Waiting for Navigation and Click (Playwright)&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;await Promise.all([
  page.waitForNavigation(),
  page.click('text=Login')
]);
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This ensures the test doesn’t miss the navigation event.&lt;/p&gt;

&lt;p&gt;Mixing Promises with Cypress&lt;/p&gt;

&lt;p&gt;Cypress doesn’t expose Promises directly, but you can wrap them:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;cy.wrap(Promise.resolve(42)).then(value =&amp;gt; {
  cy.log('Resolved value:', value);  // 42
});

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Common Pitfalls &amp;amp; Tips&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Forgetting await in Playwright&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;page.click('button#submit'); // ❌ Won’t wait  
await page.click('button#submit'); // ✅ Correct  

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Using async/await incorrectly in Cypress&lt;br&gt;
Cypress commands don’t return raw Promises, so don’t do:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const text = await cy.get('h1').text(); // ❌ Not supported  
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Instead, use&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;.then():

cy.get('h1').then($el =&amp;gt; {
  cy.log($el.text());
});


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Parallelization with Promises&lt;/strong&gt;&lt;br&gt;
For Playwright, prefer Promise.all when waiting for multiple things.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Conclusion&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Understanding Promises, async, and await is essential for writing clean, reliable automation in JavaScript/TypeScript.&lt;/p&gt;

&lt;p&gt;In Playwright, always use async/await to control flow.&lt;/p&gt;

&lt;p&gt;In Cypress, commands are asynchronous but automatically queued.&lt;/p&gt;

&lt;p&gt;For advanced scenarios, leverage Promise.all (Playwright) or cy.wrap (Cypress).&lt;/p&gt;

&lt;p&gt;Mastering these concepts makes your automation more readable, stable, and maintainable.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>playwright</category>
      <category>typescript</category>
    </item>
    <item>
      <title>Using MCP Server to Supercharge Playwright Automation</title>
      <dc:creator>Anirban Majumdar</dc:creator>
      <pubDate>Fri, 29 Aug 2025 09:32:45 +0000</pubDate>
      <link>https://dev.to/anirseven/using-mcp-server-to-supercharge-playwright-automation-5hk3</link>
      <guid>https://dev.to/anirseven/using-mcp-server-to-supercharge-playwright-automation-5hk3</guid>
      <description>&lt;p&gt;Automation at scale often struggles with two pain points:&lt;/p&gt;

&lt;p&gt;Slow test development (boilerplate code, selectors, retries).&lt;/p&gt;

&lt;p&gt;Flaky tests due to fragile locators.&lt;/p&gt;

&lt;p&gt;With Model Context Protocol (MCP), we can connect Playwright to an AI server that assists in writing, fixing, and maintaining automation tests. In this blog, we’ll set up MCP with Playwright to automate real-world scenarios on Amazon.com.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;🔹 1. Prerequisites&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Make sure you have the following installed:&lt;/p&gt;

&lt;p&gt;Node.js (&amp;gt;=18)&lt;/p&gt;

&lt;p&gt;Playwright&lt;/p&gt;

&lt;p&gt;MCP server implementation (e.g., mcp-server&lt;br&gt;
 or custom server)&lt;/p&gt;

&lt;p&gt;OpenAI/GitHub Copilot or another LLM provider&lt;/p&gt;

&lt;p&gt;Install Playwright&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npm init playwright@latest
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Add TypeScript config if needed:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npm install -D typescript ts-node @types/node
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;🔹 2. Folder Structure&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;playwright-amazon/
 ┣ tests/
 ┃ ┣ amazon-search.spec.ts
 ┃ ┣ amazon-cart.spec.ts
 ┣ mcp/
 ┃ ┣ server.ts
 ┃ ┣ config.json
 ┣ playwright.config.ts
 ┗ package.json
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;🔹 3. MCP Server Setup&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Your MCP server is the middleware between Playwright and the LLM. It provides structured prompts like “Suggest resilient Playwright locator for Add to Cart button”.&lt;/p&gt;

&lt;p&gt;Example MCP Config (mcp/config.json)&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;{
  "name": "playwright-mcp",
  "description": "MCP server for Playwright automation",
  "capabilities": {
    "selectors": true,
    "code-gen": true
  },
  "llmProvider": "openai",
  "llmModel": "gpt-4o-mini"
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Example MCP Server (mcp/server.ts)&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import express from 'express';
import bodyParser from 'body-parser';
import { generateLocator } from './utils/locator-generator';

const app = express();
app.use(bodyParser.json());

app.post('/locator', async (req, res) =&amp;gt; {
  const { request, context } = req.body;
  const locator = await generateLocator(request, context);
  res.json({ locator });
});

app.listen(4000, () =&amp;gt; console.log('MCP server running on port 4000'));

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;🔹 4. Playwright + MCP Integration&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;We’ll call MCP server from within our Playwright tests whenever we need AI-assisted selectors or snippets.&lt;/p&gt;

&lt;p&gt;Utility to Call MCP (tests/utils/mcp-client.ts)&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import axios from 'axios';

export async function getLocator(request: string, context: string): Promise&amp;lt;string&amp;gt; {
  const response = await axios.post('http://localhost:4000/locator', { request, context });
  return response.data.locator;
}
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;🔹 5. Example Test – Amazon Search&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;tests/amazon-search.spec.ts&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;import { test, expect } from '@playwright/test';
import { getLocator } from './utils/mcp-client';

test('Amazon Search for Laptop', async ({ page }) =&amp;gt; {
  await page.goto('https://www.amazon.com');

  // Get locator dynamically from MCP
  const searchBox = await getLocator("Search input field", "amazon-homepage");
  await page.fill(searchBox, 'Laptop');

  const searchButton = await getLocator("Search button", "amazon-homepage");
  await page.click(searchButton);

  // Validate results
  const results = page.locator('span.a-size-medium');
  await expect(results.first()).toBeVisible();
});



&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Here MCP generates resilient locators, so even if Amazon updates their DOM slightly, the AI can adapt.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;🔹 6. Example Test – Add to Cart&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;tests/amazon-cart.spec.ts&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;
import { test, expect } from '@playwright/test';
import { getLocator } from './utils/mcp-client';

test('Add product to Amazon Cart', async ({ page }) =&amp;gt; {
  await page.goto('https://www.amazon.com');

  // Search product
  const searchBox = await getLocator("Search input field", "amazon-homepage");
  await page.fill(searchBox, 'iPhone 15');
  const searchButton = await getLocator("Search button", "amazon-homepage");
  await page.click(searchButton);

  // Click first result
  const firstResult = await getLocator("First product link", "amazon-search-results");
  await page.click(firstResult);

  // Add to cart
  const addToCart = await getLocator("Add to Cart button", "amazon-product-page");
  await page.click(addToCart);

  // Validate cart
  const cartCount = page.locator('#nav-cart-count');
  await expect(cartCount).toHaveText('1');
});
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;🔹 7. Benefits&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;✅ Resilient selectors – MCP auto-generates robust locators.&lt;br&gt;
✅ Reduced flaky tests – Fewer selector breakages on UI changes.&lt;br&gt;
✅ Faster automation – Engineers describe tests; AI scaffolds code.&lt;br&gt;
✅ Scalable – Can plug into CI/CD for continuous improvement.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;🔹 Conclusion&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Using MCP with Playwright transforms how we build automation. Instead of spending hours debugging fragile selectors, engineers can focus on test strategy, while MCP + AI handles the scaffolding.&lt;/p&gt;

</description>
      <category>playwright</category>
      <category>mcp</category>
      <category>playwrightmcp</category>
      <category>testautomation</category>
    </item>
  </channel>
</rss>
