{"id":29100491,"url":"https://github.com/kolesnikova-dev/playwright-node","last_synced_at":"2026-04-25T18:32:46.428Z","repository":{"id":273935981,"uuid":"921315899","full_name":"kolesnikova-dev/playwright-node","owner":"kolesnikova-dev","description":"This repository contains a full-stack application that uses Playwright in a Docker container to scrape articles, deployed on Render","archived":false,"fork":false,"pushed_at":"2025-01-30T18:34:43.000Z","size":244,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-04-11T17:36:38.422Z","etag":null,"topics":["docker","express","nodejs","playwright","react","render-deployment","typescript","vite"],"latest_commit_sha":null,"homepage":"https://playwright-ui.onrender.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kolesnikova-dev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-01-23T18:21:30.000Z","updated_at":"2025-02-12T15:51:26.000Z","dependencies_parsed_at":"2025-05-05T20:39:48.931Z","dependency_job_id":null,"html_url":"https://github.com/kolesnikova-dev/playwright-node","commit_stats":null,"previous_names":["kweeuhree/playwright-node","kolesnikova-dev/playwright-node"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/kolesnikova-dev/playwright-node","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kolesnikova-dev%2Fplaywright-node","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kolesnikova-dev%2Fplaywright-node/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kolesnikova-dev%2Fplaywright-node/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kolesnikova-dev%2Fplaywright-node/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kolesnikova-dev","download_url":"https://codeload.github.com/kolesnikova-dev/playwright-node/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kolesnikova-dev%2Fplaywright-node/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32273214,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-25T18:29:39.964Z","status":"ssl_error","status_checked_at":"2026-04-25T18:29:32.149Z","response_time":59,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["docker","express","nodejs","playwright","react","render-deployment","typescript","vite"],"created_at":"2025-06-28T18:14:15.172Z","updated_at":"2026-04-25T18:32:46.407Z","avatar_url":"https://github.com/kolesnikova-dev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🌐 YCombinator Articles Scraper with Playwright Tests\n\nThis repository contains a simple full-stack application that scrapes articles from YCombinator.\nThe first ten articles are scraped for their titles and URLs, which are then displayed in the React application. The first 100 articles are scraped for their timestamps, and their order is validated.\n\nThe goal of this project is to implement integration tests using Playwright to ensure the application functions as expected.\n\nThe application is deployed on Render, with the backend running in a Docker container.\n\nDeployed frontend service: [React application on Render](https://playwright-ui.onrender.com)\n\nDeployed backend service: [Node.js Scraping Service on Render](https://playwright-app.onrender.com)\n\n## Screenshots\n\n\u003cp align=\"center\"\u003e\n\u003cimg  width=\"600\" src=\"https://github.com/kweeuhree/playwright-node/blob/master/screencapture/landing.png?raw=true\" alt=\"Landing page\" /\u003e\n\u003cimg  width=\"600\" src=\"https://github.com/kweeuhree/playwright-node/blob/master/screencapture/success.png?raw=true\" alt=\"Successful response result\" /\u003e\n\u003c/p\u003e\n\n## 🧱 Project structure\n\n**Backend (Node.js+TypeScript, Docker)**: scrapes YCombinator's articles, returns titles and urls of the first 10 and validates order of the first 100.\n\n**Frontend (React.js+TypeScript)**: displays the articles, provides a button to trigger the request, and displays relevant status and order validation messages.\n\n**Playwright Tests**: ensure that the application works as expected.\n\n## 🔍 Prerequisites\n\n- Node.js\n- npm\n\n## ▶️ Usage\n\nAs the application is hosted on Render on a free tier, the Node **server requires up 60 seconds to spin up** after a period of inactivity.\nPlease, be advised, that due to the aformentioned reason, some Playwright tests may fail unless the React application is interacted with first.\nTo ensure that the tests pass, **follow the usage guide** below:\n\n- Navigate to [React application](https://playwright-ui.onrender.com/);\n- Click the `Click me` button;\n- Await for the remote server to be spun up;\n- Await for the successful response.\n\nNow the Playwright tests can be run.\n\n#### Run the Tests\n\n- Make sure all necessary dependencies are installed;\n- Clone or fork this repository;\n- In the project folder, run the following command:\n\n```bash\nnpm install\nnpx playwright test\n```\n\n## 🎭 Testing with Playwright\n\nTests are grouped into following files:\n\n- **Api**: tests request and response headers;\n- **Articles**: tests the amount and structure of displayed articles, ensures that each article opens in a new tab;\n- **Button**: tests button style changes;\n- **Page**: ensures that the main page has title, header, button, and displays all expected objects;\n- **Status**: tests status message displayed to the user under various scenarios;\n- **testdata**: abstracts data that is reused across tests.\n\nArticles tests are run in parallel as they are slow.\n\n## ⚙️ Continuous Integration\n\nIn order to automate the testing, a GitHub Actions workflow is set up. The workflow executes all existing tests on push to the master branch of the repository. This helps to ensure code quality and catch issues early on.\n\n## 📚 Challenges and learning\n\n**Playwright**\n\nWhile scraping 100 articles, had some struggles with clicking on an element, which seems to be solved with forcing the click and awating the loading of the page:\n\n```typescript\nconst loadPromise = page.waitForEvent(\"load\");\nawait page.waitForSelector(\"a.morelink\", {\n  state: \"attached\",\n  timeout: 5000,\n});\nawait page.locator(\"a.morelink\").click({ force: true });\nawait loadPromise;\n```\n\n**Docker**\n\nThis was my first time using Docker.\n\nInitially, I tried to deploy the service without a Docker image, but the deployment failed due to issues installing Playwright browsers and necessary dependencies in the cloud. I would run into request timeout issues or authorization issues.\n\nThe solution was to create an environment that will contain all of the necessary dependencies. The official Playwright image builds blazingly fast compared to manually installing the dependencies.\n\nThe service is using the latest official Playwright image, which is deployed on Render on a free tier.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkolesnikova-dev%2Fplaywright-node","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkolesnikova-dev%2Fplaywright-node","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkolesnikova-dev%2Fplaywright-node/lists"}