Cypress - origin() Method
Last Updated :
13 Sep, 2024
Cypress is an open-source website testing tool that tests for JavaScript web applications. It is designed for end-to-end testing and it can be used for unit tests and integration tests as well. It is fast, reliable, and can run in real-time directly in the browser.
It's built to work with any front-end framework or website, including React, Angular, and Vue. In this article, we will learn about origin() Method in Cypress.
Cypress - origin() Method
origin() method in cypress allows you to interact with elements and perform actions on a different origin (domain) within your tests. It is particularly useful when you are testing applications that involve multiple domains such as authentication on third-party websites like Google, Facebook etc..
By default, URL tests are restricted to a single origin due to its security policies but with the origin() method, you can easily interact with another domain without compromising the security of your tests.
Syntax:
cy.origin(url, callbackFunction)
In this syntax:
- URL: It is a string representing the origin (domain) to which you want to switch.
- callbackFunction: A function containing Cypress commands to execute in the context of the specified origin.
Installation Steps
Before we begin make sure node.js is installed in your system.
Step 1: Create a Project Folder and move to it by using the following command.
mkdir cypress
cd cypress
Step 2: Initialize a project and Install Cypress.
npm init -y
npm install cypress --save-dev
Step 3: After Creating a Project, Run this command to start cypress.
npx cypress open
Step 4: Testing type, Configuration and creating a specialization.
- Choose a E2E Testing or Component Testing, then after quick configuration choose browser.
- After that create a new spec then click on your spec name to open your spec in any IDE.
Setting up localhost server
Follow the below steps to create two different project. One is running on port 3000 and second one is running on port 3001
- Step 1: Creating a Node.js App
npm init -y
- Step 2: Installing a required dependencies.
npm i express
- Step 3: Code for the First Application
HTML
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Main Page - Example Domain</title>
</head>
<body>
<h1>Main Domain - Example.com</h1>
<button id="redirect-button">Go to Another Domain</button>
<script>
document.getElementById('redirect-button').addEventListener('click', function () {
window.location.href = 'http://localhost:3001'; // Redirect to another domain (another port)
});
</script>
</body>
</html>
//index.js
const express = require('express');
const app = express();
const path = require('path');
app.get('/', (req,res)=>{
res.sendFile(path.join(__dirname,'/index.html'))
})
app.listen(3000,()=>{
console.log("Server Started")
})
- Step 4: Code for the Second Application
HTML
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Another Domain</title>
</head>
<body>
<h1>Another Domain - Another.com</h1>
<form id="login-form">
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<button type="submit">Login</button>
</form>
</body>
</html>
//index.js
const express = require('express');
const path = require('path')
const app = express();
app.get('/', (req,res)=>{
res.sendFile(path.join(__dirname, "/index.html"))
})
app.listen(3001, ()=>{
console.log("Server Started")
})
- Step 5: Running Both Application.
Make sure, you have created a two different folder to run the application & defined two different port. To run the application, use the below command
node index.js
Example
The below example demonstrate the use of origin() Method.
JavaScript
// cypress/e2e/origin_spec.cy.js
describe('Cypress origin() Method Example', () => {
it('should interact with elements on a different origin', () => {
// Visit the main page on the initial origin
cy.visit('http://localhost:3000/');
// Click on the button that redirects to another domain
cy.get('#redirect-button').click();
// Switch context to another origin
cy.origin('http://localhost:3001/', () => {
// Interact with elements on the cross-domain page
cy.get('#username').type('testuser');
cy.get('#password').type('password123');
cy.get('button[type="submit"]').click();
});
});
});
//cypress.config.js
const { defineConfig } = require("cypress");
module.exports = defineConfig({
e2e: {
"chromeWebSecurity": false
},
});
Output
Conclusion
In conclusion, Cypress is an end-to-end automated testing tool that enables efficient and reliable testing of web applications. It includes origin() method By which you can continue your test to work on third party website. By default cypress doesn't allow us to continue testing on third party website but you can achieve this functionality by using origin() method.
Similar Reads
Cypress - within() Method
The within() method in Cypress is used to scope the search for DOM elements within a specific element. It is helpful when you want to limit the scope of your Cypress commands (such as get(), find(), contains(), etc.) to a particular section of the DOM. This is especially useful when dealing with nes
3 min read
Cypress - visit() Method
The visit() method in Cypress is used to navigate the browser to a specific URL in your test. It allows you to open web pages, whether they are local or remote, for testing purposes. This is one of the most fundamental commands in Cypress as it sets up the starting point for most test cases by loadi
3 min read
Cypress - rightclick() Method
Cypress is a popular testing framework for web applications. It provides a lot of useful methods to interact with web pages, including the rightclick() method. In this article, we will explore the rightclick() method in Cypress, its usage, syntax, arguments, and examples.Usages of Cypress - rightcli
3 min read
Cypress - url() Method
Cypress is a popular testing framework for web applications. It provides a lot of useful methods to interact with web pages, including the url() method. In this article, we will explore the url() method in Cypress, its usage, syntax, arguments, and examples.UsagesThe url() method is used to get the
2 min read
Cypress - not() Method
The not() method in Cypress is used to exclude elements from a selection that match certain criteria or selectors. This method is particularly helpful when you want to interact with a group of elements but need to exclude specific ones that meet a condition. It provides a more refined control over e
4 min read
Cypress - siblings() Method
In web testing, identifying and interacting with specific elements about their siblings can be important for validating the behaviour of a web application. The siblings() method in Cypress is designed to help with this by selecting all sibling elements of a specified DOM element within the same pare
5 min read
Cypress - window() Method
The window() method allows you to retrieve the window object of the page, which represents the browser's window containing the DOM document. This object is crucial for accessing global variables, managing browser-level events, and manipulating the browser's environment during your tests.Usage of cyp
4 min read
Cypress - parent() Method
interactionCypress is a feature-rich end-to-end testing tool that eases the process of writing tests for web applications by exposing a rich set of functionality that allows interaction with the DOM. One such functionality is the parent() method out of the various DOM methods which enables you to ac
6 min read
Cypress - root() Method
The root() method in Cypress is a powerful tool used to select the root element of the DOM, which is typically the <html> element. This method is especially useful for starting interactions or traversals from the top level of the document, ensuring that all subsequent commands are scoped to th
5 min read
Cypress - next() Method
The next() method in Cypress allows you to select the immediately following sibling of a DOM element. This is useful when you want to interact with an element that comes directly after another in the DOM structure. It’s commonly used when navigating through lists, tables, forms, or any other HTML st
4 min read