When conducting automation testing on a website that utilizes react Styled-Components, I often encounter the challenge of dynamically changing CSS selectors. This leads me to wonder: Is there an alternative method for selecting elements that contain dynamically generated styles by Styled-Component?
Though I have used X-path, it has its limitations as not all elements are suitable candidates for X-path selection.
Here is the solution I came up with. Hopefully, it proves helpful for you.
1. Incorporate HTML5 attributes such as data-testid, or create custom ones
For instance: (check it out live on codesandbox)
import React from "react";
import styled, { css } from "styled-components";
const BorderBox = styled.div`
text-align: center;
border: 1px solid #cacaca;
`;
const Button = styled.button`
color: palevioletred;
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border: 2px solid palevioletred;
border-radius: 3px;
`;
// Customize Button component with new styles
const TomatoButton = styled(Button)`
color: tomato;
border-color: tomato;
`;
export const MyContainer = React.memo(props => {
return (
<BorderBox data-testid="myContainer">
<TomatoButton data-testid="tomatoButton">Tomato Button</TomatoButton>
<Button data-testid="normalButton">Normal Button </Button>
</BorderBox>
);
});2. Utilize xpath to query your components:
$x("//div[@data-testid='myContainer']")
$x("//div[@data-testid='myContainer']/button[@data-testid='tomatoButton']")
I want to modify this code so that it only functions on mobile devices and is disabled on computers. How can I achieve this? <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <ul id="pri ...
Currently, I possess a variety of React components such as tables, buttons, pagination, and more. I am now exploring the idea of developing a Figma plugin that can automatically generate web pages (React class components) based on a Figma design, using m ...
One of the techniques I'm using involves analyzing both the horizontal and vertical screen dimensions to differentiate between mobile devices and desktops, as well as distinguish high-resolution from low-resolution desktop displays. In order to achie ...
Currently, I am working on iPhone development and have set up a webview with a DIV element. Within this DIV, I have added 'touchstart', 'touchend', and 'touchmove' events. However, I have noticed that after adding these event ...
I am currently developing an application that retrieves data from one or multiple databases, each with different names and varying numbers of columns. The goal is to consolidate this data into a single report screen and export it as a table. While the tabl ...
Recently, I have been struggling with a problem while trying to learn about automatic testing in Java. When I run my test in IntelliJ, it keeps showing me an error message that says: "java.lang.IllegalStateException: The driver executable must exist: ...
I attempted to run next export : An error occurred while prerendering the page "/blogs/[post]". For more information, please visit: . The error message states that pages using getServerSideProps cannot be exported. Additional details can be fou ...
I am working on an interesting task. <div class="slider"> <div class="1s">1st slide</div> <div class="2s">2nd slide</div> <div class="3s">3d slide</div> </div> Here is the CSS code: .slider div { ...
When I console.log a function from one page to another, it gives me an undefined value on the other page but on the original page it gives me the correct value. How can I resolve this issue in Next.js? function MyApp({ Component, pageProps}) { const [car ...
I've implemented a Read More/Read Less button feature for product descriptions on my website. One issue I'm facing is that when I click the Read Less button at the bottom of the extended description, the text shortens as expected but the page do ...
As I was delving into the intricacies of React JS through the official documentation, everything seemed to be progressing smoothly. However, when attempting to export a method from one page to another as shown below (with file names provided at the beginni ...
Currently, I am facing a challenge where I need to extract data from a webtable on the specific website provided in my code. My goal is to only scrape games that are happening today and stop the for loop when it reaches the section of the HTML table that ...
Currently, in my project I am utilizing Next.js along with module.css. However, I have encountered an issue. There is a "button" component nested inside another component. I am trying to apply both a normal className and Style.myClass to this button compon ...
When implementing a payment service that relies on one of my express routes as a callback route, users are redirected to a different payment service link outside of my backend/frontend domain to make their payments. Upon successful payment, the user is the ...
I've run into a problem with sessionStorage while working on my React app. Even though I'm using the "use client" pragma to make sure certain code executes only on the client side, I keep encountering a ReferenceError. Below is the snippet of my ...
<nav id="section_navbar" class="navbar navbar-expand-lg fixed-top"> <div class="mx-auto my-2 order-0 order-md-1 position-relative"> <div id="top_logo" class="container-fluid"> <span>VirtualQR</ ...
In my work with complex Angular apps, I often encounter a situation where I need to select items in dropdowns that are not initially rendered in the DOM. These items are fetched from an API call and only appear in the DOM within span tags after they have b ...
I've been delving into web scraping and decided to work with YouTube datasets because of its easy accessibility I'm struggling with writing my scraped output to CSV, particularly unsure about where to use the write.writerows function. Can someon ...
Issue: Upon sending a get request to node using the fetch API, an error is encountered. Refer to comment in code for details https://i.sstatic.net/QlLP8.png server.js const express = require('express'); const app = express(); const bodyParse ...
I am attempting to implement a feature in the autocomplete of material ui where options are disabled based on a specific condition. Each table row contains an autocomplete field, and when an option is selected in one row, it should be disabled in the next ...