Login / Register |
4 Years Cypress SDET Automation
#lucidmotors #cypress
Posted by TechElliptica at 16 Jun 2025 ( Day(s) Before)

How can I locate the value in the 4th row and 2nd column of a table using Cypress?

Here is Cypress script to get 4th Row and 2nd Column


cy.get('table tr').eq(3).find('td').eq(1)
.should('exist')
.then($cell => {
cy.log($cell.text());
});


as rows and column index based. so 4th Row is 3rd index and 2nd column is 1st index here.



I have 100 tests written in cypress. I want to run only 10 tests of my choice. How can i do that ?

There are many ways to group test cases in Cypress. So we can use 2 approaches here


1 - We can add only for all those 10 tests and then execute the code


it.only('Test 1', () => {
// test code
});


but everytime if we our requirement change then its quite tedious and overhead approach



2 - Use Tags with cypress-grep Plugin


npm install -D cypress-grep


then we have to set event in cypress.config.js file

setupNodeEvents(on, config) {
require('cypress-grep/src/plugin')(config);
return config;
},
env: {
grepFilterSpecs: true
}


then we have to provide tag in every test-cases

it('test1', { tags: ['smoke', 'sanity'] }, () => {
// test code
});

it('test2', { tags: ['smoke', 'regression'] }, () => {
// test code
});




When we are executing our testcases

npx cypress run --env grep=smoke

How to reverse a string in JavaScript?

To reverse a string in JavaScript, the most common and efficient way is to:

  1. Convert the string to an array.
  2. Reverse the array.
  3. Join it back into a string.



let str1 = "this is a javascript string";
const reversed = str1.split('').reverse().join('');
console.log(reversed);

I have a dynamic HTML table with the following columns: CustomerId, CustomerName, OrderDate, and OrderTotalBill. The order of the columns is not fixed; CustomerId, CustomerName, and OrderDate can appear in any sequence. I want to locate the OrderTotalBill value for the row where CustomerId is 4 using Cypress. How can I achieve this?


Approach

  1. Identify the index of the CustomerId and OrderTotalBill columns dynamically.
  2. Loop through the rows to find the row where CustomerId is 4.
  3. Retrieve the corresponding OrderTotalBill from the same row.


Code


let customerIdIndex, orderTotalBillIndex;

// Step 1: Find indexes of relevant columns dynamically
cy.get('table thead tr th').each(($th, index) => {
const headerText = $th.text().trim();

if (headerText === 'CustomerId') customerIdIndex = index;
if (headerText === 'OrderTotalBill') orderTotalBillIndex = index;
}).then(() => {
// Step 2: Loop through rows to find CustomerId = 4
cy.get('table tbody tr').each(($row) => {
cy.wrap($row).find('td').eq(customerIdIndex).then(($cell) => {
if ($cell.text().trim() === '4') {
// Step 3: Get the OrderTotalBill from the same row
cy.wrap($row).find('td').eq(orderTotalBillIndex).then(($billCell) => {
const orderTotal = $billCell.text().trim();
cy.log(`Order Total Bill for CustomerId 4: ${orderTotal}`);
});
}
});
});
});

I have an element inside a Shadow DOM on an HTML page. How can I locate and interact with that element using Cypress?

By default, Cypress does not automatically pierce Shadow DOMs, but it provides support for accessing them using the shadow() command introduced in newer versions


If below is one shadowDOM

<custom-component>
#shadow-root
<button id="submitBtn">Submit</button>
</custom-component>


below is Cypress Code

cy.get('custom-component')
.shadow()
.find('#submitBtn')
.click();