{"id":23425691,"url":"https://github.com/chanonroy/cypress-iframe-example","last_synced_at":"2026-04-29T01:33:33.348Z","repository":{"id":85587459,"uuid":"172702538","full_name":"chanonroy/cypress-iframe-example","owner":"chanonroy","description":"⚙️An example of how to use Cypress to target elements within iframes","archived":false,"fork":false,"pushed_at":"2019-03-07T13:23:25.000Z","size":28,"stargazers_count":4,"open_issues_count":1,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-09T11:50:55.025Z","etag":null,"topics":["cypress","iframe","javascript","testing"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/chanonroy.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}},"created_at":"2019-02-26T11:55:51.000Z","updated_at":"2022-04-11T17:47:53.000Z","dependencies_parsed_at":"2023-03-13T05:57:41.115Z","dependency_job_id":null,"html_url":"https://github.com/chanonroy/cypress-iframe-example","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/chanonroy/cypress-iframe-example","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chanonroy%2Fcypress-iframe-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chanonroy%2Fcypress-iframe-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chanonroy%2Fcypress-iframe-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chanonroy%2Fcypress-iframe-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chanonroy","download_url":"https://codeload.github.com/chanonroy/cypress-iframe-example/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chanonroy%2Fcypress-iframe-example/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32407164,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-28T19:38:08.556Z","status":"ssl_error","status_checked_at":"2026-04-28T19:37:55.688Z","response_time":56,"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":["cypress","iframe","javascript","testing"],"created_at":"2024-12-23T05:13:50.600Z","updated_at":"2026-04-29T01:33:33.342Z","avatar_url":"https://github.com/chanonroy.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Using Cypress with iframes\n\nWith limited iframe support from Cypress [[Issue #136](https://github.com/cypress-io/cypress/issues/136)], the following workaround in this repo allowed me to target elements and interact with iframes during tests.\n\n### Explanation\n\nBuilding off of a snippet by [paulfalgout](https://github.com/cypress-io/cypress/issues/136#issuecomment-342391119), the solution is to create an iframe command that returns a promise upon iframe loading completion. These commands, aliased as `iframe()`, can be chained together to deal with nested iframes.\n\n```\n// support/commands.js\n\nCypress.Commands.add('iframe', { prevSubject: 'element' }, $iframe =\u003e {\n  return new Cypress.Promise(resolve =\u003e {\n      $iframe.ready(function() {\n        resolve($iframe.contents().find('body'));\n      });\n  });\n});\n```\n\nHere is an example of usage:\n\n```\n// One iframe\ncy.get(\"#iframe\").iframe().find(\"#target\").type(\"HELLO WORLD\");\n\n// Nested iframes\ncy.get(\"#firstFrame\").iframe().find(\"#secondFrame\").iframe().find('#target').type('HELLO WORLD');\n```\n\n### Installation steps\n\n1. Ensure you have the necessary global dependencies installed.\n\n    - `yarn` package manager - [link](https://yarnpkg.com/en/)\n    \n    - `node.js` - version 6.x or higher - [link](https://nodejs.org/en/download/)\n    \n2. Use `yarn install` inside the project root to install local Node dependencies.\n\n### Running the example test\n\n1. Use the command `yarn serve` to run the express server.\n\n2. In a separate window, use the command `yarn test` to run cypress.\n\n3. Click on `iframe.spec.js` to run the example test\n\nThe desired effect is to write `HELLO WORLD` in the form input found within `form.html`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchanonroy%2Fcypress-iframe-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchanonroy%2Fcypress-iframe-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchanonroy%2Fcypress-iframe-example/lists"}