GitHub Copilot과 Playwright MCP로 웹 테스트하기

세션에 승인된 브라우저 도구가 있으면 가능합니다. VS Code 내장 브라우저에는 자체 도구가 있고 작업 공간에서 Playwright MCP를 별도로 등록할 수도 있습니다. GitHub.com의 에이전트는 별도 환경에서 실행되며 기본 Playwright MCP는 그 환경의 localhost를 사용합니다. 먼저 클라이언트, URL, 성공 조건을 정하세요. 예를 들어 OFF를 읽고 Enable demo를 눌러 ON을 확인합니다. VS Code 브라우저 도구 GitHub MCP 개요

Reddit에서 한 개발자가 Copilot으로 테스트용 브라우저를 열려다 실패했다고 했습니다. 어떤 클라이언트와 도구를 썼는지는 글에 나오지 않습니다. 같은 문제가 생기면 두 가지부터 확인하세요. VS Code에서 디버깅 중이라면 통합 브라우저부터 사용하고 Microsoft Playwright 도구가 필요할 때 MCP를 추가합니다. 브라우저 테스트 토론

핵심 요약

• VS Code 통합 브라우저는 기본 도구로 페이지를 열고 조작할 수 있습니다.

• VS Code 작업 공간에서는 .vscode/mcp.json의 servers에 Playwright MCP를 등록합니다.

• 독립 실행형 Copilot CLI의 설정은 별도입니다. 대화형 세션에서는 /mcp add를 사용합니다.

• GitHub의 기본 Playwright MCP는 클라우드 작업 환경의 localhost에만 접근합니다.

• 클릭 후 같은 페이지에서 예상 상태를 확인해야 테스트가 통과합니다.

실행 환경부터 확인하기

GitHub.com에서 연결이 거부되면 클라우드 작업 환경에서 앱이 포트를 열었는지 확인하세요. VS Code Agents 창의 일부 원격 세션에서는 원격 호스트를 통해 브라우저 트래픽을 보낼 수 있습니다. 포트를 바꾸기 전에 브라우저가 사용하는 호스트를 확인하세요. 클라우드 도구 문서 통합 브라우저 네트워크 설정

실행 호스트와 localhost의 관계는 다른 클라우드 에이전트 예제에서도 확인할 수 있습니다.

VS Code 통합 브라우저부터 사용하기

앱을 실행하고 통합 브라우저에서 URL을 엽니다. Chat에서 로컬 에이전트 세션을 시작하고 도구 선택기에서 브라우저 도구를 확인합니다. 목록에 없다면 workbench.browser.enableChatTools와 조직 정책을 확인하세요. 에이전트에게 같은 URL을 열고 화면에 보이는 제목을 읽도록 요청합니다. VS Code 브라우저 도구 안내

에이전트가 페이지를 읽으면 버튼 하나를 눌러 결과를 확인하도록 합니다. 풀 리퀘스트마다 반복할 검사는 Playwright 테스트로 작성해 저장소에 두세요.

VS Code 작업 공간에 Playwright MCP 등록하기

Node.js 18 이상을 사용합니다. 팀이 같은 설정을 쓸 수 있도록 예시의 패키지 버전은 고정했습니다. 기존 .vscode/mcp.json에 항목을 추가하고 MCP: List Servers를 실행해 playwright 메뉴에서 시작합니다. 도구가 표시되지 않으면 서버 출력을 확인하세요. VS Code는 조건을 충족하는 서버를 Copilot 세션으로 전달합니다. 대화형 입력이 필요한 항목은 공식 문서에서 지원하는 설정 형식을 확인하세요.

{
  "servers": {
    "playwright": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@playwright/mcp@0.0.84", "--isolated"]
    }
  }
}

현재 에이전트에서 탐색과 스냅샷 도구를 고를 수 있는지 보세요. 작업 공간 신뢰, 조직 정책, 세션 선택에 따라 달라집니다. 처음에는 격리된 프로필로 시험합니다. 로그인한 세션이 필요하면 권한, 계정, 작업 공간 이름을 별도로 확인합니다. VS Code MCP 설정 Playwright MCP 저장소 기존 브라우저 연결

이미 다른 코딩 에이전트에서 Playwright MCP를 설정했다면 맞는 명령과 인수를 재사용해도 됩니다. 서버는 VS Code 설정 형식으로 등록하세요.

CLI와 클라우드를 별도로 설정하기

대화형 Copilot CLI에서 /mcp add를 입력하고 로컬 STDIO 서버를 선택합니다. VS Code 예시의 명령과 인수를 입력하고 저장한 다음 /mcp show playwright로 확인합니다. 사용자 설정 ~/.copilot/mcp-config.json의 최상위 키는 mcpServers입니다. 프로젝트에는 이식 가능한 .mcp.json을 둘 수 있습니다. 이름이 같으면 프로젝트 설정이 우선합니다. Copilot CLI 설정

GitHub.com 클라우드 작업에서는 해당 작업 환경에서 앱을 실행하고 그 포트를 사용합니다. 클릭 전에 프로세스가 실행 중인지, 페이지 제목이 맞는지 확인하도록 요청하세요. Reddit의 한 사용자는 웹 에이전트에서 브라우저가 이미 사용 중이라는 오류를 봤다고 했습니다. 같은 증상이 나오면 다시 시도하기 전에 오류 원문과 작업 환경을 남겨 두세요. 클라우드 에이전트 사례

화면에 보이는 상태 변화를 확인하기

직접 관리하는 테스트 페이지에 눈에 보이는 ID와 실제 업무에 영향 없는 버튼을 둡니다. 초기 값을 읽고 클릭한 다음 같은 페이지에서 결과를 읽습니다. 화면 캡처는 보조 자료입니다.

다음 HTML을 테스트 앱에서 제공하는 폴더에 copilot-fixture.html로 저장하세요. URL을 열고 실행하기 전에 새로 고칩니다. 클릭해도 버튼과 식별자가 화면에 남습니다. 확인 항목을 추가하려면 브라우저 에이전트 프롬프트 템플릿을 참고하세요.

<!doctype html>
<meta charset="utf-8">
<title>Copilot test fixture</title>
<h1>COPILOT-DEMO</h1>
<p>Status: <output id="status">OFF</output></p>
<button type="button" id="enable">Enable demo</button>
<script>
  document.getElementById("enable").addEventListener("click", () => {
    document.getElementById("status").textContent = "ON";
  });
</script>

브라우저 도구로 허용된 copilot-fixture.html 테스트 URL을 여세요. 페이지 ID가 COPILOT-DEMO이고 초기 상태가 OFF인지 확인하세요. Enable demo를 한 번 누르고 같은 ID와 ON 상태를 읽으세요. URL, 도구, 누른 컨트롤, 읽은 값을 보고하세요. URL, ID, 초기 상태가 다르면 중단하세요.

GitHub의 가이드는 더 큰 앱에서 결함을 재현하고 수정 후 검증합니다. 첫 연결에서는 버튼 하나와 확인 값 하나로 시작합니다. GitHub 디버깅 안내 첫 브라우저 에이전트 작업 Playwright 브라우저 자동화

가장 먼저 실패한 단계부터 확인하기

서버가 시작하자마자 꺼지면 로그에서 명령, Node 버전, 설정 범위를 확인합니다. 서버가 켜졌는데 도구가 없다면 같은 세션에서 도구 선택기와 작업 공간 신뢰 설정, 조직 정책을 확인하세요. MCP 연결 후 도구가 없을 때 점검할 항목입니다.

연결이 거부되면 브라우저가 실행되는 환경의 URL과 포트를 확인합니다. 페이지가 열렸는데 클릭이 멈추면 컨트롤이 보이는지, 활성 상태인지, 하나로 특정할 수 있는지 확인하세요. 접근성 이름과 예상 상태를 알려 주세요. 클릭이 실패할 때 확인할 사항에는 다른 요소에 가려진 경우도 나옵니다.

로컬 동작 점검은 내장 도구로 시작하세요. 팀이 설정을 공유해야 한다면 작업 공간에 Playwright MCP를 추가합니다. CLI와 GitHub.com에서는 실제 작업을 수행할 세션에서 호스트와 도구를 확인합니다. 한 가지 상태 변화를 검증한 뒤 테스트 범위를 넓히세요.

Secholar.L

Tabbit 그로스 & 콘텐츠

Secholar.L은 AI 브라우저와 에이전트 워크플로우에 대한 실용적인 가이드를 작성하며, 실제 조사와 검증 가능한 출처를 바탕으로 도구를 비교합니다.