I am trying to find an element using CSS Selector, using Selenium (Java).
This is my HTML.
<div class="PayMeth" widgetid="PayMeth_0" id="PayMeth_0">
<div class="Icon GIFT" data-dojo-attach-point="pmN"></div>
<div class="paytMethLab" data-dojo-attach-point="pmN">Program Card<br>
0000 000 0000 ****</div>
<div class="payMethAmtP" data-dojo-attach-point="pmAmtN">-$0.1</div>
</div>
I have used the following path but it is failing.
By.cssSelector("div[class=paytMethLab.contains(Program Card)]")
I want to get the text "Program Card".
Can someone please help. Thanks.
Here is the simple css that you can use.
div.paytMethLab
Here is the code
WebElement PayMeth = wait.until(ExpectedConditions.visibilityOfElementLocated(By.cssSelector("div.paytMethLab")));
String programcard= PayMeth .getText();
if(programcard.contains("Program Card"))
{
//your logic goes here.
}
This is what I used and it worked :)
WebElement PayMeth = wait.until(ExpectedConditions.visibilityOfElementLocated(By.cssSelector("div.paytMethLab")));
String programcard = PayMeth.getText();
if(programcard.contains("Program Card"))
{
// Do something
}
Related
Hello I try to understand when it's necessary to use inline style instead className in this case. I take a long time to solve my problem of translation. At the beginning I want to translate component by using classNameand that's don't work. it's very weird because in my point of view there is no reason that's happen. So I figure there is something wrong in my code, but what... I have not yet found. So I finish trying to translate by using a inline style. Miracle, that's work fine.
My question is why ?
Work well
export function Content() {
return (
<div style={{transform: 'translateY(100px)'}}>
<Test/>
<Footer />
</div>)
}
don't work
export function Content() {
return (
<div className={container_content}>
<Test/>
<Footer />
</div>
)
}
css
.container_content {
transform: translateY(100px);
}
Nota bene :
The problem is not from the method. To use className in my jsx
must be like that:
import { container_content } from "./test.module.css";
and next
<div className={container_content}><div>
So this part of code is good, the issue seems to come from elsewhere...
What's happening is that when you use the inline style you are passing an object that includes the styling for that component. When you use the className you need to pass in a string for the class you want to use. Right now you are passing a variable name. Either of these works:
<div className={"container_content"}>
OR
<div className="container_content">
If you think about it in regular html you would do
<div class="container_content">
EDIT: Given your updated question, you should just import the css file with:
import "./test.module.css"
and then use the solution I mentioned.
inside the js file, you need to import the CSS file like this
import " css-file-dir";
and then you can Reference to the CSS classes inside your component as a string
example :
className="container_content"
I am using This tutorial as a reference, and I am trying to use the below piece of code in my project :
let _setPlaceholderText = ( string = "Click or Drag a File Here to Upload" ) => {
template.find( ".alert span" ).innerText = string;
};
It works fine with the tutorial code when I download it and tested it, but when I copy pasted exact the same code to my project it didn't work.
If I am not mistaken the problem has to do with this line of code :
template.find( ".alert span" ).innerText = string;
can anyone explain for me what is ".alert span"? the tutorial says that the above line attempts to find the .alert span element only. Unfortunately, it wasn't enough for me to understand how to get it to work in my project.
Any help please
It looks like you're looking at the inner text for a piece of CSS intended to modify the style of span elements contained within anything that has the class name alert.
It might looks like this:
<style type="text/css">
.alert span {
color: #ff0000;
}
</style>
For modifying something like this:
<div class="alert">
<span>There was an error!</span>
</div>
I have the following html:
<span wicket:id="votevaluenotifier">
<label name="currentVoteValue" id="currentVoteValue" wicket:id="currentVoteValue" />%
</span>
I'm trying to style the result in CSS using:
.currentVoteValue
{color:#CC3300;
}
but no joy. I know I'm missing something obvious but what? I tried using votevaluenotifier instead of currentVoteValue but no dice.
Apologies - I'm a bit of CSS newbie.
I don't know wicket, but if you have
<label id="currentVoteValue">
you should style it using
#currentVoteValue {
color:#CC3300;
}
because # begins an ID selector and . a class selector
I want to Find the XPATH/CSS locator to extract the text from the following structure.
Kindly help.
<div class="page-header song-wrap">
<div class="art solo-art">
<div class="meta-info">
<h1 class="page-title">
Zehnaseeb
I want to give the locator/XPATH so that it can return the text "Zehnaseeb" (In this case)
This did not yield any result,
driver.findElement(By.xpath(".//*[#id='main']/div/section/div[1]/div[2]/h1")).getText();
have you tried waiting for the element,
String text = new WebDriverWait(driver,30).until(ExpectedConditions.visibilityOfElementLocated(By.cssSelector("div.page-header h1.page-title"))).getText();
If you are using C#, I recommend to use "ScrapySharp", it's very nice for parsing HTTML.
https://bitbucket.org/rflechner/scrapysharp/wiki/Home
Document htmlDoc = new HtmlDocument();
htmlDoc.loadHtml(driver.PageSource);
var zehnaseebstring = doc.DocumentNode.CssSelect("h1.page-title").SingleOrDefault().InnerText;
this should work.
I would check all the elements in between to see that the hierarchy is correct, but you could try to simplify by removing some of the elements in between by using descendant //
//*[#id='main']//h1[#class='page-title']
If I have the following string: John Smith, how could I use CSS to set font-weight: bold on the second word in order to achieve: John Smith.
Can this be done in pure CSS?
Update: I am retrieving user's name from the server, so in my template it is #{user.profile.name}.
Since a js solution was suggested and pure CSS isn't presently possible: Live demo (click).
Sample markup:
<p class="bold-second-word">John Smith</p>
<p class="bold-second-word">This guy and stuff.</p>
JavaScript:
var toBold = document.getElementsByClassName('bold-second-word');
for (var i=0; i<toBold.length; ++i) {
boldSecondWord(toBold[i]);
}
function boldSecondWord(elem) {
elem.innerHTML = elem.textContent.replace(/\w+ (\w+)/, function(s, c) {
return s.replace(c, '<b>'+c+'</b>');
});
}
It cannot be done in pure CSS, sorry. But if you are willing to accept a JavaScript fix, then you might want to look into something like this:
Find the start and end index of the second word in the element's textContent.
Add contenteditable attribute to element.
Use the Selection API to select that range.
Use execCommand with the bold command.
Remove contenteditable attribute.
EDIT: (just saw your edit) I agree this is a bit too hack-y for most uses. Perhaps you'd be better off saving what the last name is as meta-data?
It seems to be impossible by using only pure CSS. However, with a bit of JS you could get there pretty easily:
const phrases = document.querySelectorAll('.bold-second-word');
for (const phrase of phrases) {
const words = phrase.innerHTML.split(' ');
words[1] = `<b>${words[1]}</b>`; // this would return the second word
phrase.innerHTML = words.join(' ');
}
<p class="bold-second-word">John Smith</p>
<p class="bold-second-word">Aaron Kelly Jones</p>