Webdriver cssSelector of element with quotes inside of value - angularjs

I cannot figure out how to select an element by cssSelector in my WebDriver test.
I will appreciate your help in solving this problem.
According to webdriver css selector syntax it has to be something like
WebDriver.findElement(By.cssSelector("a[ng-click='session='my_portcalls'']"))
but it doesn't work.

I hit a similar hurdle using Protractor/WebDriverJS.
What worked for me was the following:
element(by.css('[ng-click="changePanel(\'delete\')"]'));
In the html the element looks like the following:
.... ng-click="changePanel('delete')" ...
So single escaping works!

You need to escape the single quotes inside the attribute value for the selector to be valid:
WebDriver.findElement(By.cssSelector("a[ng-click='session=\\'my_portcalls\\'']"))

Related

How to locate the XPATH of the Continue button on LinkedIn?

I right clicked the button, selected "Inspect" command and copied and used both XPATH and full XPATH. Neither of them worked for any of the commands below.
xpath = '//*[#id="ember949"]/footer/button[1]'
xpath_full = '/html/body/div[3]/div/div[2]/artdeco-tabs/artdeco-tabpanel[2]/form/footer/button[1]'
button = WebDriverWait(driver, 10).until(EC.visibility_of_element_located((By.XPATH, xpath)))
button = WebDriverWait(driver, 10).until(EC.element_to_be_clickable((By.XPATH, xpath_full)))
Can someone please explain? Thank you.
Without the HTML, I cannot give a definitive answer.
Looks like the first id may be dynamic and could change.
As for the second one, the full XPaths are brittle and I do not use them at all.
There could be an iframe that you should switch to first.
You could try searching the entire page for a button element with the continue-btn class:
//button[#class='continue-btn']
I would recommend using the Selector / CSS Selector. In the code just change
By.XPATH
to:
By.CSS_SELECTOR
and instead of copying the XPATH copy the Selector or in some cases CSS Selector.

How to get a the data-testid from a DOM component?

In my React project, sometimes a dynamically generated UUID needs to be added to the a data-testid value to ensure uniqueness amongst duplicate components in the DOM.
I have a test situation where I can grab the element I want. Now I want to get the dynamically generated data-testid from it. I've tried this but it doesn't work:
const questionDropdown = queryAllByText('Free Text')[0];
console.log(questionDropdown.getAttribute('data-testid'));
Any suggestions how to get it?
I think it's a dataset so you can get it like this:
console.log(questionDropdown.dataset.testid);
If you have an expected result you can test it with testing-library/jest-dom:
expect(questionDropdown).toHaveAttribute("data-testid", "test-id");
Doc: https://github.com/testing-library/jest-dom#tohaveattribute
I finally figured out how to do it!
So, I have a Semantic-UI Dropdown with a dynamically generated data-testid. The trick to getting the element is simply to use Regex, like this:
const questionTypeDropdown = getByTestId(/conditional-task-question-type/);
I'm revisiting this. I believe that the answer from adesuriey works great if you're dealing with conventional text, say in an Input element. But in the Semantic UI Dropdown it does not appear to work.
I think the problem lies with finding the correct ancestor element. I've tried many things but with no success.

Selenium Webdriver - how to get the value in span tag

<span id="email-display">myemailid</span>
How could i get the value between the span tag in selenium webdriver?
I tired using this code:
System.out.println(driver.findElement(By.xpath(".//*[#id='email-display']")).getText());
But i am not able to get the value. What has to be done?
Thanks in advance.
Try this:
System.out.println(driver.findElement(By.xpath(".//*[#id='email-display']")).getAttribute("textContent")
use this:
System.out.println(driver.findElement(By.cssSelector("span#email-display")).getText());
if this can not get text, please paste html with parent root and let me know.
You can use
driver.findElement(By.id("email-display")).getText();
driver.findElement(By.xpath("//span[#id='email-display']")).getText();
driver.findElement(By.cssSelector("span#email-display")).getText();
If that element is in new window or in frame, then switch to that window / frame, then perform the operations.

What is the syntax for selecting an element in protractor via element name

Is it possible to get an element by its name like you can with jQuery?
I'm trying to do the equivalent of the jQuery selector like in jQuery
$('h1')
how is this done with protractor?
I tried
element('h1')
but it doesn't work
There's a couple ways to do this - you can either get it by tagName or by css selector. So any of the following work:
element(by.css('h1')); // works with any css selector
$('h1'); // works with any css selector
element(by.tagName('h1'));
The answer was finally found on github they have a test file that shows all the selectors
element(by.css('h1'));
element(by.css('.my-class'));

Selenium Webdriver for IE XPath - c#

Im using Selenium Webdriver for IE
I am having trouble sending a click to an image. The particular image is used throughout the page - I am attempting to find by xPath.
The html snippet:
<img src='Option.gif' border='0' style="cursor:hand;" onClick="javascript:DropDownOpen('ID_1_0_0_3_0_19');" />
The Webdriver Code:
driver.FindElement(By.XPath("//img[contains(#onClick, \"javascript:DropDownOpen('ID_1_0_0_3_0_19');\"]")).Click();
Your having a problem clicking the image because your xpath contains single quotes. To xpath to an element with single quotes you'll want to use xpath's concat() function. Your xpath becomes
//img[#onClick=concat('javascript:DropDownOpen(',"'",'ID_1_0_0_3_0_19',"'",');')]
You'll notice we concat javascript:DropDownOpen( in single quotes and anytime we need to target an element containing a single quote we wrap them in double quotes.
Happy Xpathing!

Resources