{"id":15553097,"url":"https://github.com/bahmutov/cypress-form-opens-second-tab-example","last_synced_at":"2025-09-26T11:30:54.252Z","repository":{"id":41105751,"uuid":"508315662","full_name":"bahmutov/cypress-form-opens-second-tab-example","owner":"bahmutov","description":"An example stubbing a form that opens a 2nd tab in Cypress","archived":false,"fork":false,"pushed_at":"2024-12-08T19:00:57.000Z","size":263,"stargazers_count":1,"open_issues_count":4,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-12-27T20:12:55.482Z","etag":null,"topics":["cypress-example"],"latest_commit_sha":null,"homepage":"https://glebbahmutov.com/blog/stub-form-that-opens-2nd-tab/","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/bahmutov.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":"2022-06-28T13:41:55.000Z","updated_at":"2023-03-10T14:08:17.000Z","dependencies_parsed_at":"2024-01-17T05:00:01.394Z","dependency_job_id":"1e396b62-a6e3-4ba4-8343-c3839156fa8b","html_url":"https://github.com/bahmutov/cypress-form-opens-second-tab-example","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/bahmutov%2Fcypress-form-opens-second-tab-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bahmutov%2Fcypress-form-opens-second-tab-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bahmutov%2Fcypress-form-opens-second-tab-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bahmutov%2Fcypress-form-opens-second-tab-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bahmutov","download_url":"https://codeload.github.com/bahmutov/cypress-form-opens-second-tab-example/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234304871,"owners_count":18811269,"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":["cypress-example"],"created_at":"2024-10-02T14:24:06.590Z","updated_at":"2025-09-26T11:30:48.956Z","avatar_url":"https://github.com/bahmutov.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# cypress-form-opens-second-tab-example\n\n\u003e ![cypress version](https://img.shields.io/badge/cypress-12.17.4-brightgreen) [![ci](https://github.com/bahmutov/cypress-form-opens-second-tab-example/actions/workflows/ci.yml/badge.svg?branch=main)](https://github.com/bahmutov/cypress-form-opens-second-tab-example/actions/workflows/ci.yml)\n\n\u003e An example stubbing a form that opens a 2nd tab in Cypress\n\nRead the blog post [Stub The Form That Opens The Second Browser Tab](https://glebbahmutov.com/blog/stub-form-that-opens-2nd-tab/).\n\n![Forcing the form to open in the current tab](./images/spec.png)\n\n## The application\n\nThe initial page [public/index.html](./public/index.html) calls the `openNewTab` when the link is clicked. See the code in [public/app.js](./public/app.js). In short, the application submits a form\n\n```js\nconst form = document.createElement('form')\nform.target = option.target || '_blank'\nform.action = option.url\nform.method = 'GET'\n\n// send some additional information\nconst name = document.createElement('input')\nname.setAttribute('type', 'text')\nname.setAttribute('name', 'firstName')\nname.setAttribute('value', 'Joe')\nform.appendChild(name)\n\ndocument.body.appendChild(form)\nform.submit()\n$(form).remove()\n```\n\n## The specs\n\nThere are several specs showing how to handle the submission and prevent the second tab from opening at all, or redirect it into the current testing browser tab.\n\n- [1-remove-onclick.cy.js](./cypress/e2e/1-remove-onlick.cy.js) removes the `onclick` attribute, so the `openNewTab` is not called at all.\n- [2-stub-openNew.cy.js](./cypress/e2e/2-stub-openNew.cy.js) stubs the `window.openNew` method the application calls on click. We then confirm the parameters of the call instead of submitting the form.\n- [3-stub-form-submit.cy.js](./cypress/e2e/3-stub-form-submit.cy.js) allows the form to be created, but then it stubs the `submit` method\n- [4-stub-form-target.cy.js](./cypress/e2e/4-stub-form-target.cy.js) is the most advanced test. It stubs the form's target attribute to make sure the form is submitted _in the current_ test window. It also confirms the submission in two ways:\n  1. by spying on the network call and observing the search parameters\n  2. by checking the `form.submit` stub instance to get the form object and its input elements\n\nFor more, read the blog post [Deal with Second Tab in Cypress](https://glebbahmutov.com/blog/cypress-second-tab/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbahmutov%2Fcypress-form-opens-second-tab-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbahmutov%2Fcypress-form-opens-second-tab-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbahmutov%2Fcypress-form-opens-second-tab-example/lists"}