뉴스 정보 뉴스 컴퓨터 소프트웨어 및 개발 Min-jun (민준) 9월 7, 2025 0 Comments

극작가 MCP 및 Github Copilot으로 웹 앱을 디버깅하는 방법

나는 그것이 유니콘처럼 느껴질 수 있다는 것을 알고 있지만 대부분의 버그 보고서에는 실제로 오류 (또는 재현 단계)를 재현하는 단계가 포함되어 있습니다. 그것들을 갖는 것만 큼 훌륭하지만, 모든 것을 걷고 검증하는 과정은 여전히 지루합니다. 완벽한 세상에서는 프로세스를 자동화 할 수있는 엔드 투 엔드 또는 수락 테스트가 있습니다. 안타깝게도 많은 프로젝트에는 강력한 테스트가 부족합니다.

다행히도, MCP (MCP) 서버의 도움을 받아 Github Copilot은 해당 전체 프로세스를 자동화 할 수 있습니다.

https://www.youtube.com/watch?v=sh9d3lqs3a8

Repro 단계를 Copilot Agent Mode에 전달하는 방법을 살펴보고 Playwright MCP 서버를 사용하여이를 통과하고 버그를 검증하도록하겠습니다. 차례로, 오류를 추적하고 해결합니다.

극작가와 MCP는 무엇입니까? 빠른 개요

극작가는 웹 앱의 엔드 투 엔드 테스트 프레임 워크입니다. 이를 사용하여 스크립트를 작성하여 사용자 역할을하고 응용 프로그램의 기능 세트를 검증하며 품질을 보장 할 수 있습니다.

예를 들어, 쇼핑 앱을 구축하는 경우 제품 검색의 전체 흐름을 걸어 카트에 추가하고 구매를 완료하는 일련의 스크립트를 만들 수 있습니다. 이 스크립트는 자동화되어 몇 초 안에 프로세스를 검증 할 수 있습니다.

원래 Anthropic이 개발 한 MCP는 AI 에이전트에 도구를 노출시키기위한 개방형 (및 오픈 소스) 프로토콜입니다. 이러한 도구에는 추가 컨텍스트 및 정보를 제공하거나 AI 에이전트가 작업을 수행 할 수 있습니다.

이것을 함께 가져 오기 : 극작가에서 AI 요원 (또는이 경우 Github Copilot)에 이르기까지 도구를 제공하는 극작가 MCP 서버가 있습니다. 이를 통해 Copilot은 실제로 우리를 위해 재현 단계를 걸을 수 있습니다!

Cod

극작가 MCP 서버를 사용하려면 IDE에서 사용할 수 있어야합니다. VS Code에서는 Playwright MCP 서버를 설치하여 모든 프로젝트에서 사용할 수 있도록하거나 파일을 만들 수 있습니다. .vscode 폴더 타일 mcp.json 다음을 추가하십시오.

{
  "servers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest"
      ]
    }
  }
}

일단 그렇게하면 작은 것을 알 수 있습니다 놀다 바로 버튼이 나타납니다 playwright 파일에서. 해당 버튼을 선택하면 서버가 시작하여 Copilot Agent 모드와 함께 사용할 수 있습니다! (Copilot에서 에이전트 모드 사용 안내서를 받으십시오.)

특히 웹 사이트에 대한 복잡한 시작 프로세스가있는 경우 극작가를 구성해야 할 것입니다. 저의 프로젝트는 SDLC 워크숍 에이전트 (GitHub 샘플에서 사용할 수 있음)의 웹 사이트를 기반으로하며 이미 Astro & Svelte와 함께 작성된 프론트 엔드와 Flask를 사용한 백엔드가 있습니다. 이 구성을 통해 Playwright는 앱을 올바르게 시작할 수있었습니다. 또한 재미있는 사실 : 구성 파일은 실제로 Copilot에 의해 생성되었습니다!

이 프롬프트가 Copilot 에이전트 모드와 함께 사용하여 특정 요구 사항에 대해 수정할 수 있습니다.

Add Playwright to this project. When configuring Playwright, note the startup script for the site. Ensure the configuration uses this startup script, and reuses the server if one is already launched.

시나리오

DevOps 테마 보드 게임 (진정으로 급성장하는 산업)을위한 크라우드 펀딩 웹 사이트가 있다고 가정 해 봅시다. 필터는 사용자가 게시자 및 카테고리에서 검색 할 수 있습니다. 게시자 필터가 작동하지 않으면 사용자가 GitHub에서 다음과 같은 문제를 제출합니다.

## Error

The publisher filter doesn't actually filter the games by publisher.

## Repro steps

1. Go to the homepage.
2. Select a publisher from the dropdown list; the page updates.
3. Review the updated list, noting no change in the games listed.

## Expected behavior

The only games displayed are ones published by the selected publisher.

## Actual behavior

All games are still displayed.

Copilot Agent Mode가 극작가로 버그 재생산을 자동화하는 방법

Copilot Agent Mode는 피어 프로그래머로 구축되므로 작업을 제공 한 다음 작업을 검토 할 수 있습니다. 다시 말해, 우리는 우리 가보고있는 내용, 해결해야 할 문제, Copilot가 수행 할 것으로 예상되는 일을 설명하고 Copilot을 거기에서 가져갈 수 있습니다!

비디오를 따라 가면 사용자의보고 된 문제를 내 자신의 말로 표현했을 것입니다. 이것은 내가 자주하는 일입니다. 그것은 내가 요청을 더 잘 이해하고 추가 명확성을 위해 원래 파일러로 돌아갈 수 있기 때문입니다.

실제로, 나는 Copilot 에이전트 모드로 다음 프롬프트를 보내 었습니다.

A user is reporting the publisher filter doesn't do anything. Can you please use Playwright to confirm this is an issue, and if so track it down? Start by going to the landing page, using the dropdown for publisher, and seeing what happens. Thanks!

거기에서 Copilot은 일을 시작했습니다. 극작가 MCP 서버를 사용하여 웹 사이트를 시작하고 재현 단계를 수행했습니다. 그런 다음 사용자의 보고서를 확인했습니다. 게시자 필터는 아무 것도하지 않았습니다.

이 지식으로 Copilot은 버그를 추적하는 프로젝트를 탐색했습니다. 그것은 프론트 엔드 코드를 보았습니다. 극작가 MCP 서버의 도움으로 API에 대한 통화가 발생하고 있음을 확인했습니다. 그런 다음 백엔드를보고 (끊임없이) 간단한 문제인 오타를 발견했습니다.

내가 정말로 감사 한 것 : 수정을 제안한 후, 그것은 실제로 수정이 실제로 작동하는지 확인하기 위해 극작가로 돌아 왔습니다.

이 작업이 완료된 후, Copilot이 버그를 확인하고 수정을 생성했으며 수정이 버그를 해결했음을 알았습니다. 거기에서 나는 코드 검토, 추가 테스트 실행 및 마침내 풀 요청을 작성하는 데 관심을 돌렸다.

웹 앱 디버깅을 위해 Github Coplot과 함께 극작가 MCP를 사용해야하는 이유

그렇습니다. 버그 자체는 Demo가 Copilot Agent Mode 및 Playwright에 집중하고 싶었 기 때문에 간단했습니다. 경험을 통해 Copilot이 더 복잡한 버그로 귀중한 것을 확인할 수 있습니다 (경험에서 말하고 있습니다).

이 모든 것이 중요한 이유는 다음과 같습니다. Copleilot 에이전트 모드를 사용하여 극작가를 사용할 수있는 기능을 제공하면 변경 사항이 웹 사이트에 미치는 영향을 “확인”하고 일반적으로 웹 사이트와 상호 작용할 수 있습니다. 이 기능을 활용하기 위해 Copilot의 도움으로 프로젝트에 대한 극작가를 신속하게 구성 할 수 있습니다. 그리고 아직하지 않은 경우 극작가 엔드 투 엔드 테스트를 프로젝트에 통합하여 다음 단계를 수행 할 수도 있습니다.

문서를 읽으십시오 Github Copilot>에서 에이전트 모드를 사용하기 시작합니다