Cross-Origin Testing in Cypress

Cypress is an advanced test automation tool, but it limits cross-origin testing. Cross-origin examination is when users test whether an app act correctly when resources (like scripts or APIs) are requested from a different area, port, or protocol.

However, Cypress provides a workaround via thecy.origin function, allowing the user to perform the action in a different domain and then continue with the previous domain as required.

This usher explores Cypress & # 8217; s cross-origin examination, use cases, and implementation.

What is Cross-Origin Testing (cy.origin) in Cypress

Cross-origin testing in Cypress typically concern to testing the functionalities in different domains. By default, Cypress implement the same-origin insurance, meaning it can solely interact with resources from the same domain to prevent cross-site scripting (XSS) and other exposure.

The cy.origin () partallows the user to short-circuit this behavior and validate the scenarios that fall under different origins.

Cy.origin () Syntax

Cy.origin ()has two type of syntax

cy.origin (url, callbackFn) cy.origin (url, options, callbackFn)

URL: It is the URL that differs from the origin URL or URL on which you think to perform operations.

Options: It & # 8217; s an object that allows you to configure specific behaviors for the command, such as timeout and log

Callback Function: A function containing Cypress commands that can be executed in the context of the specified beginning.

Example

it ('Example cross origin ', () = & gt; {cy.visit (`` https: //www.browserstack.com ``); //do some operation cy.origin (`` https: //percy.io/login '', () = & gt; {//do something else})});

Use Cases of Cross-Origin Testing

Below are some of the real-life examples of why cross-origin examination is important

• Login to the Application with SSO authentication: SSO authentication is wide employ in many platforms; for example, if you navigate to the LinkedIn login page it allows you to log in habituate the Google or Apple certification.
  In such scenarios, the web page navigates to the respective company domains to validate the credentials. Cy.origin () can help in validating such authentication.
• Validate the Footer links: Most of the marketing pages bear footer link where their privacy insurance, biscuit insurance, and product Page are listed.
  These footer links can airt to different field or subdomains. Cypress cross-origin examination can be used to corroborate such scenarios.
• Payment System Integration Testing: Most companies rely on third-party payment systems for payment processing. When the exploiter clicks on proceed to checkout, the page will be redirected to the payment gateway website to complete the dealings. The origin of the URL differs and by default Cypress blocks such scenarios. To overcome such challenges you involve to use cy.origin () map.
• OAuth Validation: Larger company own multiple domains. However, they will experience centralized authentication systems that may belong to different domains.
  As soon as you hit the login push, the page might redirect to the central login domain to enter the credentials, leading to a cross-origin scenario.
• Third-Party Widgets: Third-party widgets and other third-party tool are often incorporate into a website. By clicking a link, you might be redirected to the corresponding widget page that are have by the respective company (of a third-party thingumabob or tool). This creates a scenario where the cy.origin function is take.
• Multi-Language Websites: If the website indorse multiple region and languages the website URL may change as you modify the words. For model, xyz.com may redirect to xyz.in if you choose Hindi, xyz.cn if you select Formosan, etc. This also points to a cross-origin scenario where you have to use cy.origin function.

When to Use cy.origin in Testing [With Examples]

Here are the instances when you will feature to usecy.originwhile testing your application

1. SSO/oAuth Authentication for your Application

Consider your application navigates to a different orbit upon clicking the sign-in page. In such scenarios you can use the cy.origin

describe ('Cross origin demo ', () = & gt; {it ('Login with github ', () = & gt; {cy.visit (`` https: //cloud.cypress.io/login ''); cy.get (`` button span '') .contains (`` Log in '') .first () .click () cy.origin (`` https: //github.com '', () = & gt; {cy.get (`` # login_field '') .type (`` test '') cy.get (`` # countersign '') .type (`` test123 '')})});});

In the above example, thecy.visit ()is used to navigate to the login page that is of a primary origin; upon clicking the Log in button, it navigates to the GitHub sign-in page, where github.com turn the cross-origin. cy.origin (& # 8220; https: //github.com & # 8220;) is expend to ease the restriction.

2. Dynamic information in a Secondary Origin

The above may be specific to the user. In real-time, you may necessitate to create a custom function that dynamically accepts the username and password.

describe ('Dynamic Data Cross Origin ', () = & gt; {const ssologin = (userName, password) = & gt; {const sentArgs = {username: userName, password: password} cy.origin (`` https: //github.com/ '', {args: sentArgs}, ({username, password}) = & gt; {cy.get (`` # login_field '') .type (username) cy.get (`` # password '') .type (password) cy.get (`` input [name='commit '] '') .click ()})} it ('Dynamic data cross origin test ', () = & gt; {cy.visit (`` https: //cloud.cypress.io/login ''); cy.get (`` push span '') .contains (`` Log in '') .first () .click () ssologin (`` bstack @ browsertack.com '', '' $ 3osod '');});});

In the above code, the help function with the namessologin ()is created, which accepts the username and password. These parameters are salve insentArgsvariable and passed intocy.origin (). This facilitate to dynamically pass the username and password based on the use cases

3. Navigating to the Secondary Origin

There may be use cases where you need to explicitly sail to the secondary origin usecy.visit (). In such cases, you must include thecy.visit ()within thecy.origin (), as shown below.

describe ('Example cross origin ', () = & gt; {it ('Example crisscross origin ', () = & gt; {cy.visit (`` https: //www.browserstack.com ''); cy.get ('h1 ') .should ('have.text ', 'App & amp; Browser Testing Made Easy '); cy.origin (`` https: //percy.io/ '', () = & gt; {cy.visit (`` https: //percy.io ''); cy.get ('h1 ') .first () .should ('have.text ', 'Your all-in-one visual review platform ');})});});

In the above code, you can explicitly navigate to the petty domain using thecy.visit (). First, you pilot towww.browserstack.com, which get the primary domain. To ease the cross-origin restriction for the junior-grade sphere, the cy.origin (& # 8220; https: //percy.io/ & # 8221;) is employ, after which you navigate to the website.

Pro tip: Tools like SUSA can handle this autonomously — upload your app and get results without writing a single test script.

Output

4. Login to SSO using the Custom Command

Cypress allows the creation of a custom command to perform any operation. Rather than rewriting the like code each time you log in, you can simply add the usage bid in thecypress/support/commands.js.

Cypress.Commands.add ('githubLogin ', (userName, password) = & gt; {const sentArgs = {username: userName, password: password} cy.visit (`` https: //cloud.cypress.io/login ''); cy.get (`` button yoke '') .contains (`` Log in '') .first () .click () cy.origin (`` https: //github.com/ '', {args: sentArgs}, ({username, countersign}) = & gt; {cy.get (`` # login_field '') .type (username) cy.get (`` # password '') .type (password) cy.get (`` input [name='commit '] '') .click ()})})

In the above code, the custom bid is being added in thecommand.js file. The custom bidding is named & # 8216; githubLogin & # 8217;, which accepts username and password as parameters to allow the dynamic login with different credentials.

The below codification shows how you can use the custom command in your test scripts:

describe ('Example cross descent ', () = & gt; {it ('Example mark origin ', () = & gt; {cy.githubLogin ('test ', 'testsook ')});});

Output

5. Navigating to Multiple Secondary Origins in Succession

If you are navigating to multiple petty origins, you need to use thecy.origin ()multiple times

describe ('Example cross origin ', () = & gt; {it ('Example cross origin ', () = & gt; {cy.visit (`` https: //www.browserstack.com ''); cy.get ('h1 ') .should ('have.text ', 'App & amp; Browser Testing Made Easy '); cy.origin ('https: //nightwatchjs.org/ ', () = & gt; {cy.visit ('https: //nightwatchjs.org/about/community/ ') cy.url () .should ('contain ', 'about/community ')}) cy.origin ('https: //percy.io ', () = & gt; {cy.visit ('https: //percy.io/features ') cy.url () .should ('contain ', 'features ')})});});

In the above example, multiple domains are navigated. It illustrates the exercise of multiplecy.origin ()as you navigate to multiple origin.

How to Run cy.origin in Cypress

Running the cy.origin tests in Cypress is the like as running any other test.

Consider an example where you hold created one test in the

cypress-demo/e2e/crossorigin/crossorign.test.cy.js.

Below is the example code.

describe ('Example cross origin ', () = & gt; {it ('Example cross descent ', () = & gt; {cy.visit (`` https: //www.browserstack.com ''); cy.get ('h1 ') .should ('have.text ', 'App & amp; Browser Testing Made Easy '); cy.origin ('https: //nightwatchjs.org/ ', () = & gt; {cy.visit ('https: //nightwatchjs.org/about/community/ ') cy.url () .should ('contain ', 'about/community ')}) cy.origin ('https: //percy.io ', () = & gt; {cy.visit ('https: //percy.io/features ') cy.url () .should ('contain ', 'features ')})});});

The above test is located inside thecypress-demo/e2e/crossoriginbooklet, wherecypress-demois the project root folder. Once you have the test created, you receive two choice to accomplish the test.

Using UI

Cypress UI can be invoked utilize the command

npx cypress open

Once you hit the above bid, you will be prompted with a welcome window. Then you can:

1. Choose the & # 8220;E2E Testing“
2. Then Click on thedesired browser(Example: Chrome)
3. Click on & # 8221;Start E2E Testing in Chrome“
4. Now, the test explorer window open. Navigate tocypress-demo/e2e/crossoriginleaflet to accomplish the & # 8220;crossorigin.test.cy.js“

Using CLI

Cypress CLI allows you to quickly execute the tests using the command line. Use the below command to execute Cypress tryout

Syntax

npx cypress run -- spec `` path_to_spec_file ''

Example

npx cypress run -- spec `` cypress/e2e/crossorigin/crossorigin.test.cy.js ''

How to Run Cross-origin tests in Cypress using BrowserStack Automate

Though a developer-friendly framework, Cypress has its limitations. While one is the limitation pertain cross-origin testing, the early is the restriction of running parallel test in local.

This is a challenge for companies as they need scalable environs to meet the fluctuating demand.

Tools like BrowserStack can help in such scenario by countenance you easily action tests on a cloud without code changes.

Moreover, it provides access to 3500+ existent device-browser combinations to test across various real device, browser, and OS combinations.

Integrating Browserstack Automate is simple. Please postdate our to quickly set up Cypress.

Talk to an Expert

Conclusion

Cypress bound cross-origin testing by nonremittal for security intellect. However, there are many use cases where cross-origin testing is crucial. Cypress indorse a workaround for cross-origin testing using thecy.origin ()command where the exploiter can navigate to different arena implicitly or explicitly to execute validation.

Like cross-origin, Cypress besides restrict parallel performance and multi-browser parallel executing locally. BrowserStack integration helps to achieve this without any hassle. BrowserStack has a vast of 3500+ devices and browsers, which accelerates and improves the accuracy of your tryout by.

Frequently Asked Questions

1. What is Cy root?

Cy.root is a bid in Cypress that allows fetching the HTML document theme. Given below is the command forcy.root

cy.root () .should ('have.prop ', 'nodeName ', 'HTML ');

2. Why do use cy in Cypress?

Cy objectis a foundational global object in Cypress. It is used to perform any activeness including the browser interactions, and validation in Cypress. It can be used for bring the elements, inexplicit assertions, do browser simulation, etc.

Related Guides