What is Model Context Protocol (MCP)?

Lets take the explanation from Model Context Protocol

MCP is an open protocol that standardizes how applications provide context to LLMs. Think of MCP like a USB-C port for AI applications. Just as USB-C provides a standardized way to connect your devices to various peripherals and accessories, MCP provides a standardized way to connect AI models to different data sources and tools.

Why MCP?

MCP helps you build agents and complex workflows on top of LLMs. LLMs frequently need to integrate with data and tools, and MCP provides:

• A growing list of pre-built integrations that your LLM can directly plug into
• The flexibility to switch between LLM providers and vendors
• Best practices for securing your data within your infrastructure

General architecture

At its core, MCP follows a client-server architecture where a host application can connect to multiple servers:

• MCP Hosts: Programs like Claude Desktop, IDEs, or AI tools that want to access data through MCP
• MCP Clients: Protocol clients that maintain 1:1 connections with servers
• MCP Servers: Lightweight programs that each expose specific capabilities through the standardized Model Context Protocol
• Local Data Sources: Your computer’s files, databases, and services that MCP servers can securely access
• Remote Services: External systems available over the internet (e.g., through APIs) that MCP servers can connect to

VSCode Agent Mode

Visual Studio Code Agent Mode allows you to interact with the MCP server directly from the editor. Follow these steps to enable and use this feature:

1. Activate MCP Agent Mode

• Open the Command Palette in Visual Studio Code (Ctrl+Shift+P or Cmd+Shift+P on macOS).

• Search for “MCP, the MCP options most be listed:

2. Add the MCP Server:
   • Click on MCP: Add Server… option
   • VSCode provides several ways to add MCP agents:

• Select Docker Image option

• Enter the docker image: omarortega87/mpc-webdriver

• Select Allow

• Add the MCP ID (this is auto populated):

• Select User Settings

• VSCode will add the necessary user settings that are available from the Docker Image

"mcp": {
"servers": {
"webdriver": {
"command": "docker",
	"args": [
	"run",
	"-i",
	"--rm",
	"omarortega87/mpc-webdriver"
],
	"env": {},
	"type": "stdio"
	}
}
}

• Open Gitbub Copilot and select the Agent Mode option:

• A new icon will be displayed referring to the mcp-webdriver agent

• VSCode will display all the available actions by clicking on the tools icon:

Using MCP-Selenium with Pytest Selenium framework

Now is time to send some prompts to Github Copilot.

It is important to highlight the way we construct the prompts for Github copilot, because if the prompt is not accurate the response is not going to be accurate too. GH Copilot will try to fill the gaps if the right context is not provided, it is designed to provide an answer no matter what, for that reason if we do not provide a good amount of context it will hallucinate.

I created a copilot-instructions.md file, that file is going to help as reference to selenium and python best practices, the mcp-selenium is going to help to provide context as a MCP Server, it will take the instructions in the prompt and it will replicate the same, it is like a record & play selenium tool, it will perform the actions and locate the selectors for the elements, helping on creating reference to the GH copilot. GH Copilot will take this real time context and will generate the text and files required to implement the code following the instructions.

Lets create the prompt, I want to test the checkboxes on the Web site https://the-internet.herokuapp.com/checkboxesthere are a couple of them, I can check them and uncheck them, so I want to assert if the check box was checked or unchecked too. I use the next prompt:

Using the "copilot-instructions file", 
and the AB_TESTING class to construct the Web Elements. 
Create a test case with the following steps
"open the https://the-internet.herokuapp.com site,
click on the checkboxes link,
check the first checkbox and assert it was checked,
uncheck the second checkbox and assert it was unchecked"

The AI Agent is going to start replicating these actions using the mcp-selenium code, it will navigate to the page and perform the actions, GH Copilot will take this context and provide the text. The output I got from GH Copilot was:

VSCode will highlight the new added code, it added the new locators and the test:

ab_testing.py

@property
def checkboxes_link(self):
	locator = Locator(by=By.LINK_TEXT, value="Checkboxes")
	return BaseElement(
		driver=self.driver,
		locator=locator
	)

@property
def first_checkbox(self):
	locator = Locator(by=By.XPATH, value="//form[@id='checkboxes']/input[1]")
	return BaseElement(
		driver=self.driver,
		locator=locator
	)

@property
def second_checkbox(self):
	locator = Locator(by=By.XPATH, value="//form[@id='checkboxes']/input[2]")
	return BaseElement(
		driver=self.driver,
		locator=locator
	)

test_selenium_basic.py

def test_checkboxes_page(execution):
	driver = execution
	checkboxes_page = AB_TESTING(driver)
	# Navigate to the site
	checkboxes_page.go("https://the-internet.herokuapp.com")
	# Click on the Checkboxes link
	checkboxes_page.checkboxes_link.click()
	# Check the first checkbox and assert it is checked
	checkboxes_page.first_checkbox.click()
	assert checkboxes_page.first_checkbox.is_selected()
	# Uncheck the second checkbox and assert it is unchecked
	if checkboxes_page.second_checkbox.is_selected():
		checkboxes_page.second_checkbox.click()
		assert not checkboxes_page.second_checkbox.is_selected()

As you can see the code is now useful but it is not perfect because the url is not needed to be passed to the go function, this is already being set, but the code is good if we want to have a template or reference, in this case the code is simple, with few modifications:

test_selenium_basic.py

def test_checkboxes_page(execution):
	checkboxes_page = AB_TESTING(driver=execution)
	# Navigate to the site
	checkboxes_page.go()
	# Click on the Checkboxes link
	checkboxes_page.checkboxes_link.click()
	# Check the first checkbox and assert it is checked
	checkboxes_page.first_checkbox.click()
	assert checkboxes_page.first_checkbox.is_selected()
	# Uncheck the second checkbox and assert it is unchecked
	if checkboxes_page.second_checkbox.is_selected():
		checkboxes_page.second_checkbox.click()
		assert not checkboxes_page.second_checkbox.is_selected()

The test case can be executed now:

tests/test_selenium_basic.py::test_checkboxes_page PASSED

The Test PASSED, it was generated by the AI Agent, and improved by the Developer 😊.

I will be updating/maintaing the Automation Framework on Github, here is the link Pytest Selenium GH Project

I will be updating/maintaing the mcp-selenium project on Github, here is the link MCP-Selenium GH Project