{"id":28515020,"url":"https://github.com/percy/example-percy-ruby-selenium","last_synced_at":"2025-09-06T19:44:39.863Z","repository":{"id":66239025,"uuid":"360968647","full_name":"percy/example-percy-ruby-selenium","owner":"percy","description":"Example app demonstrating Percy's Ruby Selenium integration. ","archived":false,"fork":false,"pushed_at":"2025-06-16T12:50:01.000Z","size":163,"stargazers_count":0,"open_issues_count":4,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-28T14:48:49.770Z","etag":null,"topics":["selenium","selenium-ruby","testing","visual","visual-testing"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/percy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-04-23T18:08:37.000Z","updated_at":"2025-06-16T12:50:04.000Z","dependencies_parsed_at":"2025-06-08T20:18:45.397Z","dependency_job_id":null,"html_url":"https://github.com/percy/example-percy-ruby-selenium","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/percy/example-percy-ruby-selenium","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/percy%2Fexample-percy-ruby-selenium","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/percy%2Fexample-percy-ruby-selenium/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/percy%2Fexample-percy-ruby-selenium/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/percy%2Fexample-percy-ruby-selenium/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/percy","download_url":"https://codeload.github.com/percy/example-percy-ruby-selenium/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/percy%2Fexample-percy-ruby-selenium/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273955650,"owners_count":25197579,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-06T02:00:13.247Z","response_time":2576,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["selenium","selenium-ruby","testing","visual","visual-testing"],"created_at":"2025-06-09T02:35:09.804Z","updated_at":"2025-09-06T19:44:39.843Z","avatar_url":"https://github.com/percy.png","language":"JavaScript","readme":"# Selenium Ruby Example\n![Tests](https://github.com/percy/example-percy-ruby-selenium/workflows/Tests/badge.svg)\n[![This project is using Percy.io for visual regression testing.](https://percy.io/static/images/percy-badge.svg)](https://percy.io/percy/example-percy-ruby-selenium)\n\nExample app showing integration of [Percy](https://percy.io/) visual testing\ninto Ruby Selenium tests.\n\nBased on the [TodoMVC](https://github.com/tastejs/todomvc) [VanillaJS](https://github.com/tastejs/todomvc/tree/master/examples/vanillajs)\napp, forked at commit [4e301c7014093505dcf6678c8f97a5e8dee2d250](https://github.com/tastejs/todomvc/tree/4e301c7014093505dcf6678c8f97a5e8dee2d250).\n\n## Selenium Ruby Tutorial\n\nThis tutorial assumes that you're already familiar with Ruby \u0026 Selenium and focuses on using them\nwith Percy. You'll still be able to follow along if you're not familiar with Ruby \u0026 Selenium, but\nwe won't spend time introducing concepts.\n\nThis tutorial also assumes you have Ruby, Node, Make, and git installed.\n\n### Step 1\n\nClone the example application and install dependencies:\n\n``` shell\n$ git clone https://github.com/percy/example-percy-ruby-selenium.git\n$ cd example-percy-ruby-selenium\n$ make install\n```\n\nThe example app and it's tests will now be ready to go. You can explore the app by running `make\nserve` and then opening `localhost:8000` in a browser.\n\n### Step 2\n\nSign in to Percy and create a new project. You can name the project \"todo\" if you'd like. After\nyou've created the project, you'll be shown a token environment variable.\n\n### Step 3\n\nIn the shell window you're working in, export the token environment variable:\n\n**Unix**\n\n``` shell\n$ export PERCY_TOKEN=\"\u003cyour token here\u003e\"\n```\n\n**Windows**\n\n``` shell\n$ set PERCY_TOKEN=\"\u003cyour token here\u003e\"\n\n# PowerShell\n$ $Env:PERCY_TOKEN=\"\u003cyour token here\u003e\"\n```\n\nNote: Usually this would only be set up in your CI environment, but to keep things simple we'll\nconfigure it in your shell so that Percy is enabled in your local environment.\n\n### Step 4\n\nCheck out a new branch for your work in this tutorial (we'll call this branch\n`tutorial-example`), then run tests \u0026 take snapshots:\n\n``` shell\n$ git checkout -b tutorial-example\n$ make test\n```\n\nThis will run the app's Selenium tests, which contain calls to create Percy snapshots. The snapshots\nwill then be uploaded to Percy for comparison. Percy will use the Percy token you used in **Step 2**\nto know which organization and project to upload the snapshots to.\n\nYou can view the screenshots in Percy now if you want, but there will be no visual comparisons\nyet. You'll see that Percy shows you that these snapshots come from your `tutorial-example` branch.\n\n### Step 5\n\nUse your text editor to edit `index.html` and introduce some visual changes. For example, you can\nadd inline CSS to bold the \"Clear completed\" button on line 32. After the change, that line looks\nlike this:\n\n``` html\n\u003cbutton class=\"clear-completed\" style=\"font-weight:bold\"\u003eClear completed\u003c/button\u003e\n```\n\n### Step 6\n\nCommit the change:\n\n``` shell\n$ git commit -am \"Emphasize 'Clear completed' button\"\n```\n\n### Step 7\n\nRun the tests with snapshots again:\n\n``` shell\n$ make test\n```\n\nThis will run the tests again and take new snapshots of our modified application. The new snapshots\nwill be uploaded to Percy and compared with the previous snapshots, showing any visual diffs.\n\nAt the end of the test run output, you will see logs from Percy confirming that the snapshots were\nsuccessfully uploaded and giving you a direct URL to check out any visual diffs.\n\n### Step 8\n\nVisit your project in Percy and you'll see a new build with the visual comparisons between the two\nruns. Click anywhere on the Build 2 row. You can see the original snapshots on the left, and the new\nsnapshots on the right.\n\nPercy has highlighted what's changed visually in the app! Snapshots with the largest changes are\nshown first You can click on the highlight to reveal the underlying screenshot.\n\nIf you scroll down, you'll see that no other test cases were impacted by our changes to the 'Clear\ncompleted' button. The unchanged snapshots appear grouped together at the bottom of the list.\n\n### Finished! 😀\n\nFrom here, you can try making your own changes to the app and tests, if you like. If you do, re-run\nthe tests  and you'll see any visual changes reflected in Percy.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpercy%2Fexample-percy-ruby-selenium","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpercy%2Fexample-percy-ruby-selenium","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpercy%2Fexample-percy-ruby-selenium/lists"}