[00:00]
많은 사람들이 AI로 애플리케이션을 만드는 방법을 배웠지만,
[00:01]
AI로 소프트웨어를 테스트하는 방법에 대해서는
[00:04]
많이 이야기하지 않습니다.
[00:05]
그래서 이 영상에서는
[00:07]
TestSprite라는 도구를 사용하는 방법을 보여드리겠습니다.
[00:08]
이는 소프트웨어 테스트를 위한
[00:10]
가장 쉬운 AI 에이전트입니다.
[00:13]
구체적으로는 먼저
[00:14]
AI 코딩 IDE 내에서 TestSprite MCP 서버를
[00:16]
사용하는 방법을 보여드리겠습니다.
[00:18]
그리고 이런 간단한 애플리케이션을
[00:20]
어떻게 활용하는지 보여드릴 텐데요.
[00:22]
여기서는 자연어를 사용해서
[00:24]
주식 정보를 요청하고,
[00:25]
TradingView 같은 도구들을 포함해서
[00:27]
주식 데이터를 시각화하고
[00:28]
실시간 주식 정보도 제공합니다.
[00:30]
그래서 이 영상에서는
[00:32]
이 애플리케이션을 이 도구로 테스트해보겠습니다.
[00:33]
시작하기 위해 먼저
[00:35]
TestSprite 로그인을 클릭합니다.
[00:36]
로그인한 후 MCP 테스트를 클릭합니다.
[00:38]
빠른 설치를 원한다면 여기서
[00:41]
지금 설치하기를
[00:42]
클릭할 수 있습니다.
[00:44]
여기서 보시는 것처럼
[00:45]
Cursor와 함께 작동하며
[00:47]
우리가 가진 MCP 서버들과도 작동합니다.
[00:50]
여기서 보시는 것처럼 우리가 해야 할 일은
[00:51]
이 MCP 서버용 객체를 간단히 복사하는 것뿐입니다.
[00:54]
Claude를 사용해서 열어보겠습니다.
[00:56]
여기서 MCP 서버를 클릭하고
[00:58]
추가 MCP 서버를 여기에 추가하겠습니다.
[01:00]
그리고 여기서 API 키를 가져오겠습니다.
[01:02]
API 키를 얻으려면
[01:03]
간단히 대시보드로 가서
[01:06]
API 키를 클릭하고 API 키 생성을 클릭하면 됩니다.
[01:09]
여기서는 MCP 서버라고 하겠습니다.
[01:11]
키를 복사하고 여기에 붙여넣겠습니다.
[01:14]
키를 여기에 붙여넣습니다.
[01:16]
좋습니다. 이게 제 키가 될 것입니다.
[01:17]
여기서 보시는 것처럼 TestSprite가 활성화되었습니다.
[01:19]
TestSprite MCP 서버를 살펴보면
[01:21]
간단히 'TestSprite로
[01:22]
이 프로젝트를 테스트해 달라'고 말하면
[01:23]
이 MCP 서버를 사용해서 나머지를 처리합니다.
[01:25]
여기서 단계들을 살펴보면
[01:27]
먼저 PRD 파일을 읽고
[01:29]
코드를 분석한 다음
[01:30]
우리가 가진 제품 요구사항 문서를
[01:32]
정규화할 TestSprite PRD를 생성하고
[01:35]
테스트 코드를 생성하고 작업을 실행하며
[01:37]
결과를 제공하고 또한
[01:38]
이를 수정할 수 있게 해줍니다.
[01:40]
발견한 것들을 어떻게 수정할지에 대한
[01:42]
수정 보고서를 제공합니다.
[01:44]
여기서 보시는 것처럼
[01:46]
이 MCP 서버는 개발자들의
[01:47]
많은 시간을 절약해줄 것입니다.
[01:49]
단순히 테스트 보고서를 생성할 수 있고
[01:51]
그 테스트 보고서를 바탕으로
[01:53]
수정 사항과
[01:55]
테스트 커버리지 그리고 우리가 가진
[01:57]
애플리케이션 기반의 테스트들을 생성하기 때문입니다.
[02:00]
그런 경우에
[02:01]
여기서 Claude 4를 사용하겠습니다.
[02:03]
그리고 여기서 'TestSprite로
[02:04]
이 프로젝트를 테스트해 달라'고 말하겠습니다.
[02:07]
어떻게 되는지 봅시다.
[02:08]
이 과정에서 TestSprite를 위한
[02:10]
MCP 서버를 호출해서
[02:12]
테스트를 부트스트랩할 수 있었고
[02:14]
결국 전체 코드베이스를 스캔해서
[02:16]
코드 요약을 생성할 수 있다는 것을 볼 수 있습니다.
[02:18]
이것이 바로 여기 있는 JSON 파일인데
[02:20]
프로젝트 구조를 분석하는 파일입니다.
[02:23]
코드 요약을 생성합니다. 이걸 살펴보면
[02:25]
기술 스택과 기능들의 목록이 있는 것을 볼 수 있습니다
[02:26]
그리고 각 기능마다
[02:29]
해당 기능과 관련된 파일들이 있는 것을 볼 수 있습니다
[02:30]
해당 기능과 관련된 파일들을
[02:32]
코드 요약이 정확한지 확인한 후에
[02:34]
TestSprite를 사용하여 PRD 파일과
[02:36]
테스트 계획을 생성하는 단계로 진행됩니다
[02:37]
이 경우 우리는 검증됨이라고
[02:39]
말할 것입니다. 그러면 테스트 계획 생성을
[02:40]
시작할 수 있어야 합니다
[02:42]
좋습니다. 결국 프론트엔드와
[02:44]
백엔드를 위한 완전한 테스트 계획을
[02:45]
생성하는 것을 볼 수 있습니다. 여기서
[02:46]
테스트 보고서의 마크다운 파일에 대한
[02:48]
보고서를 볼 수 있습니다. 그리고 여기서
[02:50]
프로젝트 개요와
[02:52]
테스트 환경 설정, 그리고
[02:53]
코드 분석 요약과
[02:55]
주요 기능들을 볼 수 있습니다
[02:58]
그리고 여기가 생성된 테스트 계획입니다
[02:59]
여기서 프론트엔드를 위한 시나리오들과
[03:01]
실행 프로세스를 볼 수 있습니다
[03:04]
기본적으로 현재 애플리케이션의
[03:05]
상태에 대한 보고서를 생성하고
[03:07]
이 보고서를 바탕으로 수행할 수 있는
[03:09]
작업에 대한 권장사항과
[03:10]
CI/CD 통합에 대한 향후 개선사항,
[03:13]
테스트 커버리지,
[03:15]
성능 모니터링,
[03:17]
심지어 에러 추적까지 제공하고
[03:19]
결론과 모든 것을 제공합니다
[03:21]
각 시나리오의 테스트 케이스를
[03:22]
자세히 보고 싶다면
[03:25]
TestSprite 프론트엔드 테스트 계획도
[03:27]
볼 수 있습니다. 여기서 각
[03:28]
객체에 대한 테스트 케이스가 있는 것을
[03:30]
볼 수 있습니다. 예를 들어
[03:31]
이 계획의 경우, 제목과
[03:33]
설명이 있고, 해당 테스트를
[03:35]
수행하기 위한 단계들이 있습니다
[03:36]
전반적으로 애플리케이션에 대한
[03:39]
완전한 테스트 보고서와
[03:40]
추가로 개선할 수 있는 사항들을
[03:42]
제공한다는 것을 볼 수 있습니다. 이제 TestSprite MCP 서버를
[03:43]
사용하는 방법을 알았으니
[03:45]
앱을 사용하여 테스트를
[03:46]
생성하는 방법을 살펴보겠습니다. 여기서
[03:48]
테스트 생성을 클릭하고
[03:50]
테스트 이름을 예를 들어 Stock App이라고
[03:52]
지정할 수 있습니다. 그리고 여기서
[03:54]
API 엔드포인트, 이름 등과 같은
[03:56]
백엔드에 대한 API 세부사항을 제공할 수 있습니다
[03:59]
백엔드가 없다면
[04:00]
백엔드를 건너뛸 수도 있습니다
[04:02]
프론트엔드만 테스트하고 싶으므로
[04:03]
백엔드 건너뛰기를 클릭하겠습니다
[04:05]
프론트엔드의 경우
[04:06]
웹 애플리케이션의 URL을
[04:08]
간단히 전달할 수 있습니다. 그리고 여기서
[04:11]
인증이 있다면 로그인 정보를
[04:12]
제공할 수도 있지만 선택사항입니다
[04:15]
그리고 여기서 테스트 계획이나
[04:16]
테스트 애플리케이션에 대한
[04:18]
지침을 제공할 수도 있습니다
[04:19]
이것을 클릭하면
[04:21]
이런 모습이 나타납니다
[04:22]
테스트 계획의 초안을
[04:24]
생성할 것입니다. 현재 하나의 URL과
[04:26]
8개의 테스트 케이스를 찾았습니다
[04:28]
여기가 기본적으로 테스트 계획
[04:30]
세부사항의 초안입니다. 테스트 이름,
[04:32]
우선순위, 테스트 이름과
[04:35]
테스트에 대한 설명이 포함되어 있습니다
[04:36]
실시간 데이터 테스트 같은 것들을
[04:38]
시장 시각화와 또한
[04:40]
챗봇 상호작용, 멀티 툴
[04:42]
응답 검증 그리고
[04:44]
트레이딩 뷰와 에러 처리, 사용자
[04:47]
인증이 있다면 말이죠. 여기서
[04:49]
보시면 원하지 않는 테스트는
[04:51]
체크 해제할 수도 있습니다. 예를 들어
[04:53]
사용자 인증을 체크 해제할 수 있는데
[04:55]
저희 애플리케이션에는
[04:57]
로그인이나 그런 게 없거든요. 그래서
[04:59]
이 경우에는 다음을 클릭해서
[05:00]
진행하겠습니다. 여기서 보시면
[05:02]
테스트를 생성할 거예요. 하나씩
[05:04]
애플리케이션을 테스트할 거고
[05:06]
저희가 가진 테스트 케이스를 기반으로 하죠.
[05:07]
좋습니다. 이제 보시면
[05:08]
8개 테스트를 모두 실행했고 여기서
[05:10]
테스트 결과들을 볼 수 있습니다. 정말
[05:12]
멋진 점은 각 테스트마다
[05:13]
제가 한 작업들의 화면 녹화도
[05:15]
생성한다는 거예요. 예를 들어
[05:16]
주식 쿼리와 챗봇 상호작용이 있죠. 만약
[05:18]
이 비디오를 재생한다면, 전체 화면으로
[05:20]
하고 처음부터 재생하겠습니다.
[05:22]
보시면 가장 먼저
[05:24]
쿼리를 입력할 거예요. 여기서
[05:26]
보시면 이게 이 질문에 대한
[05:28]
응답 결과고 여기서
[05:29]
보시면 통과로 표시되었고
[05:31]
이 테스트를 어떻게 생성했는지
[05:33]
코드도 보여줍니다. 여기서 보시면
[05:35]
테스트에 Playwright를 사용하고 있어요.
[05:36]
가장 먼저 Chromium 브라우저를
[05:38]
헤드리스 모드로 설정하고
[05:40]
이 페이지로 이동해서
[05:42]
DOM이 로드될 때까지 기다립니다. 그리고
[05:43]
여기서 보시면 요소를 선택하고
[05:45]
입력 상자를 채우기 위해
[05:46]
정확히 어디를 클릭해야 하는지 알고 있어요.
[05:49]
그리고 입력을 채우기 위해
[05:51]
요소를 선택하고 결과를 얻는데
[05:52]
정말 멋지죠. 여기서 실행을 클릭해서
[05:54]
그 테스트를 다시 실행할 수도 있어요.
[05:55]
좋습니다. 실패한 테스트도
[05:57]
한 번 살펴보죠. 여기서 보시면
[05:59]
마켓 데이터도 있고
[06:00]
여기서 보시면 위젯이 Amazon 데이터를
[06:03]
올바르게 표시할 수 없다는 걸
[06:04]
확인했습니다. 이걸
[06:07]
자세히 살펴보죠. 전체 화면으로 하고
[06:10]
Amazon을 클릭하면
[06:12]
JSON 객체가 나오는 걸 볼 수 있고
[06:13]
현재 보시면 Amazon에 대한
[06:15]
데이터 표시가 없는데
[06:16]
이게 문제죠. 보시면
[06:19]
이 버그를 지적하고
[06:20]
이게 실패한 테스트라고 보고할 수 있어요.
[06:22]
물론 여기 코드를 사용해서
[06:24]
언제든지 그 테스트를 다시 실행할 수 있고
[06:26]
그 테스트를 다시 실행할 수 있습니다. 그리고
[06:28]
여기 모든 테스트를 클릭하면
[06:30]
실행한 테스트들을
[06:31]
볼 수 있습니다. 여기를 클릭해서
[06:32]
리포트를 다운로드할 수도 있는데
[06:34]
PDF 형식으로 테스트 리포트를
[06:36]
생성합니다. 여기서 보시면
[06:38]
하이라이트 개요, 주요 발견 사항
[06:40]
테스트 커버리지를 포함한 의제가 있고
[06:42]
실행 요약과 텍스트
[06:44]
실행 세부 사항도 있습니다. 하이라이트
[06:46]
개요를 하나씩 살펴보면
[06:48]
백엔드는 테스트하지 않고
[06:50]
프론트엔드에만 집중했습니다
[06:51]
웹사이트의 프론트엔드에만 집중했습니다. 그리고
[06:53]
테스트 커버리지를 보시면
[06:55]
5개가 통과하고 2개가 실패했습니다.
[06:56]
프론트엔드 UI 테스트 커버리지 측면에서는
[06:58]
실행 요약, 테스트 케이스,
[07:00]
설명, 영향도, 그리고
[07:02]
상태가 나열되어 있습니다.
[07:04]
아래로 스크롤하면
[07:05]
각 테스트 실행 분석이 있고
[07:07]
상태를 확인할 수 있으며
[07:09]
해당 테스트를 실행하는 코드도 볼 수 있습니다.
[07:11]
또 다른 부분은 GitHub으로도 내보낼 수 있다는 것입니다.
[07:13]
실행된 모든 코드에 대해
[07:15]
리포지토리를 생성하고
[07:17]
CI/CD 파이프라인에 추가하거나
[07:19]
필요할 때마다 실행할 수 있습니다.
[07:21]
정말 멋진 점은
[07:23]
모니터링 시스템이 있어서
[07:24]
테스트를 재실행하는 스케줄을 만들 수 있다는 것입니다.
[07:26]
예를 들어
[07:28]
방금 실행한 테스트를
[07:30]
재실행할 시간을 스케줄링할 수도 있습니다.
[07:32]
하지만 현재 저는 무료 플랜을 사용하고 있어서
[07:34]
스케줄 기능을 사용하려면
[07:36]
월 19달러 추가로 업그레이드해야 하며
[07:37]
더 많은 크레딧과 모니터링, 스케줄링,
[07:39]
그리고 최적화된 실행 기능을 제공받을 수 있습니다.
[07:41]
자, 이 영상은 여기까지입니다.
[07:43]
이 제품을 사용해보고 싶으시다면
[07:45]
월 150 크레딧을 제공하는
[07:46]
무료 버전이 있고
[07:48]
이 영상에서 소개한 기능들을
[07:49]
거의 모두 사용할 수 있습니다.
[07:51]
하지만 스타터 플랜으로 업그레이드하고 싶으시다면
[07:53]
현재 1개월 무료 할인이 있어서
[07:54]
완전히 무료로 월 400 크레딧을
[07:56]
받을 수 있습니다.
[07:58]
멋진 점은 Claude 3.7s나
[08:00]
GPT 4.1 같은 고급 모델과
[08:01]
최적화된 실행 기능,
[08:04]
우선 지원을 받을 수 있다는 것입니다.
[08:07]
이 제품을 사용해보고 싶으시다면
[08:09]
test.com을 확인해보세요.
[08:10]
이 영상은 여기까지입니다.
[08:12]
이 영상이 도움이 되셨다면
[08:13]
좋아요를 눌러주시고
[08:15]
이런 콘텐츠를 더 보시려면 구독을 고려해보세요.
[08:17]
그럼 이제
[08:18]
다음 영상에서 뵙겠습니다.
[08:20]