What methods can I use to compare a React Component across multiple pages with Cypress?

One task I am trying to tackle is comparing a component on one page with the same component on another page using Cypress. For example, let's say I have a Pricing Component on the Home page, and I want to verify if the values on the Pricing Page are identical.

I attempted the following approach, but unfortunately it did not produce the desired results:

describe('Comparing the Pricing component on different pages', () => {

    it('', () => {
        cy.visit('http://localhost:3000')
        cy.get('.package-name').contains('Iniciante').invoke('text').as('name')

        cy.visit('http://localhost:3000/pricing')
        cy.get('.package-name').contains('Iniciante').invoke('text').as('name2')

        expect("name").to.be.eq("name2")

    })
    
})

Answer №1

Your aliases function differently than variables. Remember to use .then() to retrieve their values.

Don't forget, you can designate http://localhost:3000 as the baseUrl in your cypress.config.js.

Here is an example of how your test script should be structured:

cy.visit('/')
cy.get('.package-name').contains('Iniciante').invoke('text').as('name')

cy.visit('/pricing')
cy.get('.package-name').contains('Iniciante').invoke('text').as('name2')

cy.get('@name').then(name => {
  cy.get('@name2').then(name2 => {
    expect(name).to.be.eq(name2)
  ])
})

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"Exploring locations with Google Maps and integrating them into interactive

I recently encountered an issue while working on a node express application and integrating the google maps javascript api. The problem arose when I attempted to transfer the sample code from the google website, along with my API key, into a .ejs file. S ...

Utilize the setState method within a iterating process

When using the react hook useState, it behaves similarly to setState in terms of updating the state. This means that operations are done asynchronously. In my project, I rely on updating the state with a 2-second timeout. However, I encountered an issue w ...

CSS Element Overlapping Issue in Safari Browser

I am currently developing an audio player for my application that includes a pause/play button, next button, and back button. I have encountered a problem specifically on Safari where the back/pause buttons are overlapping each other. The play/pause button ...

Adjusting the maximum number of connections for Litespeed's external applications

Running Nextjs (frontend) and PHP (backend) on my dedicated server has been smooth sailing until reaching 200 users. Now at this user threshold, Nextjs experiences timeouts from the APIs while they still function properly. It appears that LiteSpeed may hav ...

Despite successfully connecting to my webservice, the ajax function encounters an error

<script type='text/javascript'> $(document).ready(function () { $("#submit").click(function (e) { e.preventDefault(); var userName = $("#username").val(); var pwd = $("#password").val(); authenticate(use ...

Steps to invoke a function in a PHP file from an external JavaScript file

Can anyone assist me with calling the function below in my PHP file? function update_hidden_input(saved_tokens, hidden_input) { var token_values = $.map(saved_tokens, function (el) { //alert(el[settings.tokenValue]); return el[ ...

Error message: Unable to locate module when using a variable to import an image in React

I've encountered an issue with my React code that I can't seem to figure out. I am integrating the Accuweather API and trying to display the weather icon on my app. Initially, everything seemed to be working fine as I constructed the image path l ...

What could be causing JQuery to disrupt my HTML code by inserting additional <a> tags?

My dilemma involves this specific chunk of HTML code stored within a javascript string, while utilizing Jquery 1.6.1 from the Google CDN: Upon executing console.log(string): <a><div class='product-autocomplete-result'> & ...

How can I deactivate all form controls within an AngularJS form?

To prevent any changes to the form components when the view button is clicked, I need to disable them. Here is my form: <form action="#" class="form-horizontal" > <div class="form-group"> <label for="fieldname" class="col-md-3 cont ...

Having difficulty building a react.js application using Visual Studio 2019

Currently, I am following a helpful tutorial on creating a react.js application using visual studio. At this stage, the tutorial instructs me to open the command prompt and enter the following command: webpack app.tsx --config webpack-config.js (I have ...

Maxlength and Minlength attributes are not considered when using input type=“number”

Why is the maxlength attribute not functioning properly for this input element? <input type="number" maxlength="5" maxlength="10" /> ...

Sharing environment variables between a React app and an Express.js server that hosts it as a static site can be achieved by setting

My static site react app is hosted under an express server project in a folder called client/build. The oauth redirect uris point to the express server for token retrieval. The react app redirects users to the oauth endpoint, which is also referenced by th ...

How come my effort to evade quotation marks in JSON isn't successful?

When trying to parse a JSON-string using the JQuery.parseJSON function, I encountered an error message that read: Uncaught SyntaxError: Unexpected token R. This was unusual as the only uppercase 'R' in my JSON-formatted string appeared right afte ...

The functionality of the React Router DOM seems to be malfunctioning

I am facing an issue with running a program on my computer while it runs successfully on other PCs. When I try to run this program, I encounter the following error message. Any help in fixing this would be greatly appreciated... index.js import React, {C ...

Problem with disabling dates on jQuery datepicker

After spending several days trying to solve this issue, I've decided to seek help. The problem at hand is disabling dates in my bootstrap datepicker using the following HTML code: <head> <!-- Required meta tags --> <meta charset="utf-8 ...

Steering clear of using relative paths for requiring modules in Node.js

When it comes to importing dependencies, I like to avoid using excessive relative filesystem navigation such as ../../../foo/bar. In my experience with front-end development, I have found that using RequireJS allows me to set a default base path for "abso ...

Pressing the enter key in an AngularJS form does not trigger submission

Having trouble with a login form that won't submit when the user presses enter. While the form works fine when the "Login" button is clicked, hitting enter doesn't trigger submission and leads to some unexpected behavior: The ng-submit associat ...

When the modal is closed, the textarea data remains intact, while the model is cleared

My challenge involves a simple modal that includes a text area. The issue I am facing is resetting the data of the textarea. Below is the modal code: <div class="modal fade" ng-controller="MyCtrl"> <div class="modal-dialog"> <d ...

Generate a download link for the image being shown in a div element

I am working on a project where I need to display HTML content offline within a Windows Application. The application, developed in Autoplay Media Studio, includes an iexplore box to load the HTML. Before the application loads, I have set up a silent insta ...

Adapting CSS styles according to the height of the viewport

Goldman Sachs has an interesting webpage located here. One feature that caught my eye is the header that appears as you scroll down, with squares changing from white to blue based on the section of the page. I'm curious about how they achieved this ef ...