A nextjs project with bun to run playwright test commands from the browser and visualize the commands in the embedded browser.
- Node.js (version 16 or higher)
- Package manager: bun, npm, or yarn
- Docker (version 20.10 or higher)
Note: Docker must be running for the quick start to work.
git clone https://github.com/suyash5053/playwright-browser-runner.git && cd playwright-browser-runner && docker compose up --buildInstallation will take time for the first time as two docker images are built and the next time it will be faster. Note: Docker must be running for the installation to work.
- Clone the repository:
git clone https://github.com/suyash5053/playwright-browser-runner.git- Navigate to the project directory:
cd playwright-browser-runner- Build the Docker image:
docker-compose up --build- Open http://localhost:3000 in your browser to see the application.
- Clone the repository:
git clone https://github.com/suyash5053/playwright-browser-runner.git- Navigate to the project directory:
cd playwright-browser-runner- Install dependencies:
bun install- Start the development server:
bun run devNOTE: You might face an error called as there is no docker network found. To fix this run the following command and run the 4th step again.
docker network create app-network-global- Open http://localhost:3000 in your browser to see the application.
-
Open http://localhost:3000 in your browser to see the application.
-
Enter the site url in the input field and click on the
Open Browserbutton orClose Portsbutton if prompted and then click on theOpen Browserbutton. -
Wait for the embedded browser to open the page.
-
Enter the playwright test command in the input field and click on the
Execute Command or Ctrl+Enter or Cmd+Enterto run the test. -
Visualize the command execution in the embedded browser.
-
Command will be saved in the history.
https://www.loom.com/share/8288d758bf494934bdd156c8e4a9513b?sid=9c98e444-6130-474e-b30e-5cc6e330856a
- Creating a production version of the app.
- Adding better UI for the embedded browser.
- Adding a way to show logs as well as errors in the UI.
- Adding a click event to run the command from the history.
- Adding a way to save the history to a file.
- Better error handling and diagnostics.
- Fork the repository
- Create your feature branch (git checkout -b feature/amazing-feature)
- Commit your changes (git commit -m 'Add some amazing feature')
- Push to the branch (git push origin feature/amazing-feature)
- Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
If you encounter any issues, please report them on the GitHub Issues page.
If you find this project helpful, please consider giving it a star on GitHub!