headless-recorder

KO | EN

gitlite — search

#javascript #hacktoberfest #react #typescript #go #macos #nodejs #windows #awesome #cli #pytorch #security #mcp #open-source

headless-recorder

(★ 15,294)

브라우저 상호작용을 녹화하여 Playwright 또는 Puppeteer 스크립트를 생성해 주는 Chrome 확장 프로그램.

headless-recorder 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 🚨 지원 중단!
2022년 12월 16일부로 Headless Recorder는 완전히 지원이 중단되었습니다. 더 이상 새로운 변경 사항, 지원, 유지보수 또는 신규 기능은 제공되지 않습니다.
자세한 정보와 대안에 대해서는 이 [issue](https://github.com/checkly/headless-recorder/issues/232)를 참고하세요.

![Headless Recorder](./assets/logo.png)

![](https://www.checklyhq.com/images/footer-logo.svg)

# Headless Recorder

![Github Build](https://github.com/checkly/headless-recorder/workflows/Lint%20&%20Build%20&%20Test/badge.svg?branch=main)
![Chrome Webstore Users](https://img.shields.io/chrome-web-store/users/djeegiggegleadkkbgopoonhjimgehda?label=Chrome%20Webstore%20-%20Users)
![Chrome Webstore Version](https://img.shields.io/chrome-web-store/v/djeegiggegleadkkbgopoonhjimgehda?label=Chrome%20Webstore)

> 🎥 Headless recorder는 브라우저 상호작용을 기록하고 Playwright/Puppeteer 스크립트를 생성해 주는 Chrome 확장 프로그램입니다.

![Headless recorder demo](./assets/hr.gif)

## 개요
Headless recorder는 브라우저 상호작용을 기록하고 [Playwright](https://playwright.dev/) 또는 [Puppeteer](http://pptr.dev/) 스크립트를 생성해 주는 Chrome extension입니다. [Chrome Webstore](https://chrome.google.com/webstore/detail/puppeteer-recorder/djeegiggegleadkkbgopoonhjimgehda)에서 설치하여 시작해 보세요!
이 프로젝트는 기존 오픈 소스 프로젝트([Credits](#-credits) 참고)를 바탕으로 구축되었지만, 확장성, 설정 가능성, 그리고 더 부드러운 UI가 추가되었습니다. 더 자세한 정보는 [documentation](https://www.checklyhq.com/docs/headless-recorder/)을 확인해 주세요.
> 🤔 Puppeteer와 Playwright에 대해 더 알아보고 싶으신가요? 오픈된 [Headless Guides](https://www.checklyhq.com/learn/headless/)를 확인해 보세요.
  
## 주요 기능
- 클릭 및 입력(type) 이벤트 기록
- `waitForNavigation`, `setViewPort` 및 기타 유용한 구문 추가
- Playwright 및 Puppeteer 스크립트 생성
- HTML 요소의 CSS 셀렉터 미리보기
- 전체 페이지 및 요소 스크립트 캡처
- 기록 일시 중지, 재개 및 재시작
- 브라우저에 최신 스크립트 유지
- 클립보드에 복사
- 생성된 스크립트를 [Checkly](https://checklyhq.com)에서 직접 실행
- 유연한 설정 옵션 및 다크 모드 지원
- 요소 선택을 위한 `data-id` 설정 지원
#### 기록되는 이벤트
- `click`
- `dblclick`
- `change`
- `keydown`
- `select`
- `submit`
- `load`
- `unload`
> 이 컬렉션은 향후 릴리스에서 확장될 예정입니다. 💪
  
## 사용 방법
1. 아이콘을 클릭하고 빨간색 버튼을 누르세요.
2. 👉 `input` 요소에 입력을 마친 후 `tab`을 누르세요. 👈
3. 링크, 입력창 및 기타 요소를 클릭하세요.
4. 각 탐색(navigation) 시 페이지가 완전히 로드될 때까지 기다리세요.
\*\*더 많은 입력을 받을 준비가 되면 아이콘이 ![recording icon](./assets/rec.png)에서 ![waiting icon](./assets/wait.png)(으)로 바뀝니다.\*\*
5. 아무것도 기록하지 않고 이동만 하고 싶을 때는 일시 중지(Pause)를 클릭하세요. 계속 기록하려면 재개(Resume)를 누르세요.
### ⌨️ 단축키
- `alt + k`: 오버레이 토글
- `alt + shift + F`: 전체 페이지 스크린샷 캡처
- `alt + shift + E`: 요소 스크린샷 캡처
  
## 로컬에서 실행하기
프로젝트를 클론한 후, 터미널을 열고 프로젝트 루트 디렉토리로 이동합니다.
```bash
$ npm i # install dependencies
$ npm run serve # run development mode
$ npm run test # run test cases
$ npm run lint # run and fix linter issues
$ npm run build # build and zip for production
```
  
## 로컬에 설치하기
1. Chrome을 열고 다음 URL을 사용하여 extensions 페이지로 이동합니다: [`chrome://extensions`](chrome://extensions).
1. "\*\*Developer mode\*\*"가 활성화되어 있는지 확인합니다.
1. "\*\*Load unpacked extension\*\*" 버튼을 클릭하고 `headless-recorder/dist` 디렉토리를 찾아 선택합니다.
![](https://raw.githubusercontent.com/checkly/headless-recorder/main/assets/dev-guide.png)
  
## 릴리스
1. `npm version`을 사용하여 버전을 올립니다(patch, minor, major).
2. `git push --tags`로 태그와 함께 변경 사항을 푸시합니다.
3. \*\*gren\*\*을 사용하여 릴리스를 생성합니다: `gren release --override --data-source=milestones --milestone-match="{{tag\_name}}"`
> 🚨 새 버전과 관련된 모든 이슈가 태그 이름의 마일스톤에 연결되어 있는지 확인하세요.
  
## 크레딧
Headless recorder는 segment.io의 [Daydream](https://github.com/segmentio/daydream)과 [ui recorder](https://github.com/yguan/ui-recorder)의 정신적 계승작이자 결합물입니다.
  
## 라이선스
[MIT](https://github.com/checkly/headless-recorder/blob/main/LICENSE)

[![Checkly](./assets/checkly-logo.png?raw=true)](https://checklyhq.com?utm_source=github&utm_medium=sponsor-logo-github&utm_campaign=headless-recorder)
  
*Delightful Active Monitoring for Developers*

**From Checkly with ♥️**

headless-recorder

headless-recorder 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

headless-recorder

headless-recorder 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README