How to select DOM elements with number value id using D3 - d3.js

All:
I wonder how do I select a DIV element with id="1" in D3, I can do it in jQuery, but when I turn to D3, it gives error like:
Uncaught DOMException: Failed to execute 'querySelector' on
'Document': 'div.chart#1' is not a valid selector
<div id="1"></div>
Thanks

The id TAG must start with letter, but you can use this:
d3.select('[id="1"]').append("div");
This is the example in JSFiddle
And here the technical explanation.

I had a situation when trying to select an element by id using d3 failed with the error:
Uncaught DOMException: Document.querySelector: 'obj_id' is not a valid selector.
My work around was to define a function
const d3Select = (id) => d3.select(document.getElementById(id))
an example of usage:
const dom = d3Select('obj_id')
.attr('class','warning')
and it works just fine

If you gave it an ID, you can select it directly by ID. You don't need to specify div in the selector.
d3.select('#1')
.foo()

Related

Get value of aggregate xpath function in Selenium Java

I'm trying to get the index of a <tr> element based on the contents of its <td> elements in Selenium using xpath.
String xpath = "count(//tr[td[text()='Column Value A'] and td[text()='Column Value B']]/preceding-sibling::*)"
WebElement count = driver.findElement(By.xpath(xpath))
However, I'm getting this exception.
org.openqa.selenium.InvalidSelectorException: invalid selector: Unable to locate an element with the xpath expression count(//tr[td[text()='Column Value A'] and td[text()='Column Value B']]/preceding-sibling::*) because of the following error:
TypeError: Failed to execute 'evaluate' on 'Document': The result is not a node set, and therefore cannot be converted to the desired type.
Is there any way for Selenium to return the value of an aggregate xpath function?
Thanks in advance for your help!

cypress: select value which exists within the tag

Below is my code and I am trying to select a value(velocity_and_express) which is given within the data-bip-collection attribute. Can anyone please help me on how to select the value from the lists given in data-bip-collection ?
<span
class="best_in_place highlight_on_success funding_type"
data-bip-attr="funding_type"
data-bip-collect="[["velocity_and_express","velocity_and_express"],["velocity","velocity"],["express","express"],["not_yet_set","not_yet_set"]]"
data-bip-confirm="Are you sure you want to change funding type?"
data-bip-object="company"
data-bip-original-content="not_yet_set"
data-bip-type="select"
data-bip-url="/admin/companies/13"
data-bip-value="not_yet_set"
id="best_in_place_company_13_funding_type"
data-ol-has-click-handler=""
>velocity</span>
I tried selecting the option using cy.get() but it did not work
cy.get('[data-bip-attr="funding_type"]')
.click()
.get('[data-bip-value="velocity_and_express"]')
.click()
cy.on('window:confirm', () => true)
You can use the jquery contains selector (docs)
Example:
cy.get(`[data-bip-collect*="velocity_and_express"]`)

I'm trying to get the "id" of an html tag, but the xpath doesnt work

I'm using selenium and i want to get the "id" of an html tag with "find_elements_by_xpath", but i've got this error :
selenium.common.exceptions.InvalidSelectorException: Message: invalid
selector: The result of the xpath expression
"//body[contains(#class,'de')]/div/div[contains(#class,'container-fluid
default')]/section[contains(#id,'mainContent')]/div[contains(#class,'row-fluid')]/div[contains(#id,'contentContainer
row-fluid')]/div[contains(#class,'content')]/div[contains(#class,'ses')]/ul/li/#id"
is: [object Attr]. It should be an element.
When i executed this code:
browser.find_elements_by_xpath("//body[contains(#class,'de')]/div/div[contains(#class,'container-fluid default')]/section[contains(#id,'mainContent')]/div[contains(#class,'row-fluid')]/div[contains(#id,'contentContainer row-fluid')]/div[contains(#class,'content')]/div[contains(#class,'ses')]/ul/li/#id")
While the same code without "/#id" work perfectly but i've got only the text in the "li" tag and it's not what i want.
According to the error, the problem comes from the Xpath.
I expected that this code would return all the "id" that are in "li" html tag, but i got the error.
Thank you for your help
#id is an attribute, not an element. The XPath is OK, but the function only returns elements, not attributes. I doubt there's find_attributes_by_xpath, but if you want to find the li element that has the #id defined, you can specify that in the quantifier:
browser.find_elements_by_xpath("//body[contains(#class,'de')]
/div/div[contains(#class,'container-fluid default')]
/section[contains(#id,'mainContent')]
/div[contains(#class,'row-fluid')]
/div[contains(#id,'contentContainer row-fluid')]
/div[contains(#class,'content')]
/div[contains(#class,'ses')]/ul/li[#id]")
~~~~~
You can then call element.get_attribute('id') to retrieve the id of the element.

Finding xpath for an element loaded by Ajax-json response using class and text

I have an element like
<td class="google-visualization-table-th gradient google-visualization-table-sorthdr">
Project Name
<span class="google-visualization-table-sortind">▼</span>
</td>
I tried
driver.findElement(By.xpath("//td[contains(#class, 'google-visualization-table-th') and normalize-space(text()) = 'Project Name']")
But its not working. Basically its code for Column header and I need to recognize each column header and print if the heading exist or not.
We do not know which version of XPath you are using, but depending on the exact version, text() means different things.
I suspect that the text content of span(the weird character ▼) is also part of td/text(). This is because text() does not mean:
Return the rext nodes of the context node
In this case it means:
Return the text nodes of the context node and the text nodes of all its decendants.
Use contains() also in the second half of the predicate:
//td[contains(#class, 'google-visualization-table-th') and contains(.,'Project Name')]
Its resolved now, element was not getting identified because they were getting loaded in an iframe. I used the below code o switch to iframe and then did usual operations to track the elements.
WebDriverWait wait = new WebDriverWait(driver, 200);
By by = By.id("iframe id");
try {
wait.until(ExpectedConditions.frameToBeAvailableAndSwitchToIt(by));
Thanks everyone for the help.

Querying HTML attributes in Dart

I have HTML in this format:
<form name="fruit_name">
<input id="fruit-name" type="hidden" name="Banana">
</form>
I have Dart querying the fruit name like this:
var fruitName = query('#fruit-name').attributes.values.last;
This works great in Chrome and Safari. But In Firefox, the attributes come back in a different order, so name is no longer last. What's the best way to grab the attribute I'm after without relying on the browser so much?
attributes is a Map, so this should work:
var fruitName = query('#fruit-name').attributes['name'];
You can use :
var fruitName = query('input#fruit-name').name;
The result of the query is in fact a InputElement and you have more member that in a simple Element.
By prepending #fruit-name with input you will tell to the analyzer that the result of query is an InputElement. Without that you would get a warning ( There is no such getter 'name' in 'Element' ).
Finally, from a performance point of view, the best way to do this is with document.getElementById(id) because getElementById is really faster than querySelector ) :
InputElement fruitNameElement = document.getElementById('fruit-name');
var fruitName = fruitNameElement.name;
Here, the first line allows to type fruitNameElement to prevent warning when calling fruitNameElement.name.

Resources