{"id":20045807,"url":"https://github.com/omergulen/copycat","last_synced_at":"2025-03-17T14:17:14.680Z","repository":{"id":48169755,"uuid":"198571970","full_name":"omergulen/copycat","owner":"omergulen","description":"An extension to test web projects with ease! Create a test code without writing a line of code!","archived":false,"fork":false,"pushed_at":"2024-08-28T01:48:37.000Z","size":5269,"stargazers_count":181,"open_issues_count":5,"forks_count":15,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-01T22:46:03.356Z","etag":null,"topics":["chrome-extension","injected-page","reactjs","testing","testing-tool","testing-tools"],"latest_commit_sha":null,"homepage":"https://chrome.google.com/webstore/detail/testing-extension/dlbnejfbjfikckofdndbjndhhbplmnpj","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/omergulen.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":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-07-24T06:25:15.000Z","updated_at":"2025-02-27T01:06:10.000Z","dependencies_parsed_at":"2024-12-14T09:08:26.271Z","dependency_job_id":"610703a9-1e5b-4236-bce9-f1ea9c4f1163","html_url":"https://github.com/omergulen/copycat","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/omergulen%2Fcopycat","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/omergulen%2Fcopycat/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/omergulen%2Fcopycat/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/omergulen%2Fcopycat/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/omergulen","download_url":"https://codeload.github.com/omergulen/copycat/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244047646,"owners_count":20389206,"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","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":["chrome-extension","injected-page","reactjs","testing","testing-tool","testing-tools"],"created_at":"2024-11-13T11:19:16.437Z","updated_at":"2025-03-17T14:17:14.651Z","avatar_url":"https://github.com/omergulen.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Chrome Web Store](https://img.shields.io/chrome-web-store/v/dlbnejfbjfikckofdndbjndhhbplmnpj.svg?colorB=%234FC828\u0026style=flat)](https://chrome.google.com/webstore/detail/testing-extension/dlbnejfbjfikckofdndbjndhhbplmnpj)\n[![Chrome Web Store Rating](https://img.shields.io/chrome-web-store/stars/ibomigipadcieapbemkegkmadbbanbgm.svg?colorB=%234FC828\u0026label=rating\u0026style=flat)](https://chrome.google.com/webstore/detail/testing-extension/dlbnejfbjfikckofdndbjndhhbplmnpj)\n[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg?style=flat)](https://github.com/omergulen/testing-extension/blob/master/LICENSE)\n\n# Copycat - Testing Extension\n\n\u003cimg src=\"./public/icon256.png\" /\u003e\n\n## (for jest-puppeteer)\nThis extension is built to ease creating web tests. It is like Selenium-IDE, but for jest-puppeteer (for now).\n\nAlso, this extension records actions on your own browser, so it doesn't need to open up new Selenium or Puppeteer window to record your actions on it.\n\nIn recording state it records the events which are stated below with the target elements unique selector.\n\n### Supported Actions\n\n#### Click origined events\n\n| Action Key    | Description   |\n| --------------------- | ------------- |\n| `click`       | Mouse `click` event. |\n| `mousedown`       | Mouse `mousedown` event. |\n| `drag-and-drop` | If `mouseup` event comes after `mousedown` event and the difference between their coordinates is greater than 10. |\n\n#### Key originated events\n\n| Action Key    | Description   |\n| --------------------- | ------------- |\n| `keydown`       | Keyboard `keydown` event. It automaticly gathers the `keydown` events into one if they consecutive triggered and their selectors are the same. |\n| `combined-keydown`       | It combines special keydown events if they are trigged at the same time, example: `Ctrl+A`. |\n\n#### Page change events\n\n| Action Key    | Description   |\n| --------------------- | ------------- |\n| `page-change`       | If `onbeforeunload` event is triggered. |\n| `click-page-change` | If `onbeforeunload` event of the window comes after `click` or `mousedown` event. |\n\n#### Verify events\n\nTriggers with right click on the element and choose proper verify action.\n\n| Action Key    | Description   |\n| --------------------- | ------------- |\n| `verify-text`       | It gets the right clicked element's `text` and matches with the `textContent` of the element in the test. |\n| `verify-link`       | It gets the right clicked element's `href` and matches with the `href` of the element in the test. |\n| `verify-DOM`       | It gets the right clicked element and check if it exists in the test. |\n\n## Installation\n\n### Google Web Store\n[Install on Chrome Web Store](https://chrome.google.com/webstore/detail/testing-extension/dlbnejfbjfikckofdndbjndhhbplmnpj)   \n\n\u003ca href=\"https://chrome.google.com/webstore/detail/testing-extension/dlbnejfbjfikckofdndbjndhhbplmnpj\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_128x128.png\" width=\"48\" /\u003e\u003c/a\u003e\n\nor \n\n### Manual Installation\n\n```\ngit clone https://github.com/omergulen/copycat.git\n```\nGo to `copycat` directory run\n\n```\nyarn install\n```\nNow build the extension using\n```\nyarn build\n```\nYou will see a `build` folder generated inside `[PROJECT_HOME]`\n\n#### Adding Copycat to Chrome\n\nIn Chrome browser, go to `chrome://extensions` page and switch on developer mode. This enables the ability to locally install a Chrome extension.\n\n\u003cimg src=\"https://cdn-images-1.medium.com/max/1600/1*OaygCwLSwLakyTqCADbmDw.png\" /\u003e\n\nNow click on the `LOAD UNPACKED` and browse to `[PROJECT_HOME]\\build` ,This will install the React app as a Chrome extension.\n\nWhen you go to any website and click on extension icon, injected page will toggle.\n\n\u003cimg src=\"./assets/extension_test.png\" /\u003e\n\n\u003cimg src=\"./assets/extension_test2.png\" /\u003e\n\n\u003cimg src=\"./assets/close_on_hover.png\" /\u003e\n\nRemove unwanted actions on hover.\n\n## Usage - Testing Environment\n\n### Installation of jest-puppeteer\n\n```bash\n# for jest 22~23\nyarn add --save-dev jest-puppeteer@3.9.0 puppeteer jest\n# for jest 24+\nyarn add --save-dev jest-puppeteer puppeteer jest\n```\nor\n\n```bash\n# for jest 22~23\nnpm install --save-dev jest-puppeteer@3.9.0 puppeteer jest\n# for jest 24+\nnpm install --save-dev jest-puppeteer puppeteer jest\n```\n\n### Update Jest configuration\n\nCreate `jest.config.js` in the root of your testing environment.\n\n```\nmodule.exports = {\n  \"preset\": \"jest-puppeteer\"\n}\n```\n\n\n### Creating `__tests__` folder\n\nTo work with default `jest-puppeteer` preset, you need to put your test files into the `__tests__` folder in the root of your testing environment.\n\n\n### Basic Test Output Code\n\nFollowing test example in the GIF will generate such code. It starts in [my GitHub Profile](https://github.com/omergulen) and clicks one of the pinned repositories (testing-extension) and when page changes it checks for the repository title's `href` is `https://github.com/omergulen/copycat` or not.\n\n\n```\ndescribe('Test 1', () =\u003e {\n\tbeforeAll(async () =\u003e {\n\t\tawait page.goto('https://github.com/omergulen');\n\t});\n\n\tit('Test 1 - 1', async () =\u003e {\n\t\tawait Promise.all([\n\t\t\tpage.click(':nth-child(2) \u003e .Box \u003e .pinned-item-list-item-content \u003e .d-flex \u003e .text-bold \u003e .repo'),\n\t\t\tpage.waitForNavigation()\n\t\t]);\n\t\tvar nodeLink = await page.$$eval('strong \u003e a', el =\u003e el[0].href)\n\t\texpect(nodeLink).toBe('https://github.com/omergulen/copycat');\n\t}, 60000);\n});\n```\n\n\n\u003cimg src=\"./assets/test_example.gif\" /\u003e\n\n\n### Update Puppeteer configuration _(optional)_\n\nCreate `jest-puppeteer.config.js` in the root of your testing environment.\n```\nmodule.exports = {\n  launch: {\n    headless: false, // Disable headless chromium\n    defaultViewport: null // Set page fit to the browser\n  },\n  browserContext: 'default',\n}\n```\n\n### Adding `test` command to the project configuration\n\nIn your project's `package.json` file, insert `\"test\": \"jest\"` line into the `\"scripts\"` object.\n\nIt will basicly look something like that:\n```\n{\n  \"scripts\": {\n    \"test\": \"jest\"\n  },\n  \"devDependencies\": {\n    \"jest-puppeteer\": \"^4.3.0\"\n  },\n  \"dependencies\": {\n    \"jest\": \"^24.8.0\",\n    \"puppeteer\": \"^1.19.0\"\n  }\n}\n```\n\n### Running tests\n\n`yarn run test` or `npm run test` will do.\n\n\u003cimg src=\"./assets/run_test.png\" /\u003e\n\n## Contribution\n\nBug reports and pull requests are welcome on GitHub at https://github.com/omergulen/testing-extension. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the Contributor Covenant code of conduct\n\n\n## License\n\nThe repo is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fomergulen%2Fcopycat","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fomergulen%2Fcopycat","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fomergulen%2Fcopycat/lists"}