I am trying to click on elements on a page. While I was looking through the code for a good way to identify the element, I noticed that each different element had a different data-userassetid. How would I access this element?
<div class="item-card-container" data-userassetid="142946016">
Using document.querySelector and querying the elements by the attribute. The attribute query is the attribute name and value between brackets.
In that case:
const userAssetElement = document.querySelector('[data-userassetid="142946016"]');
If you want to know more: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
Related
I am working on a React App in which it requires working with tables and adding rows dynamically. I used this answer to achieve that: https://stackoverflow.com/a/54455262/13037132. I am trying to label an <input type="file" id={id} /> for styling the whole
in every cell of the table. The id={id} attribute in the input element is for dynamically adding a row when an Add Row button is clicked.
I found some solution for styling this input, but it requires labelling it, needs an id attribute to link to. How can I do that, since the id is already occupied? Is there a way to link this input to a label without using the id but something else? If you want any additional data on this, please let me know.
And I am also looking for a way to add columns too just like I am adding rows using the above-stated answer. Can anyone help?
Use a class instead of id, since multiple id with same value does not help, use a class and access that input by $(this):
$('.class_name').click(function(){
$(this) // this will acquire the clicked/target input
})
I am trying to click this button but I keep failing as there is also another button with the same class name with a different aria-name or I am just clicking it wrongly.
<button aria-label="upvote" aria-pressed="false" class="voteButton _2m5vzALl8kQdr9kwIFUo5t" data-click-id="upvote"><span class="_3wVayy5JvIMI67DheMYra2 _3SUsITjKNQ7Tp0Wi2jGxIM _22nWXKAY6OzAfK5GcUqWV2 qW0l8Af61EP35WIG6vnGk _3edNsMs0PNfyQYofMNVhsG"><i class="icon icon-upvote _2Jxk822qXs4DaXwsN7yyHA _39UOLMgvssWenwbRxz_iEn"></i></span></button>
my code looks like this at the moment :
await page.waitForSelector('.voteButton._2m5vzALl8kQdr9kwIFUo5t');
await page.click('.voteButton._2m5vzALl8kQdr9kwIFUo5t');
How can I click an element specifically for aria-label or data-click-id?
You must be independent from hash names like _3wVayy5JvIMI67DheMYra2
This names will be change after rebuild
You need use for your case some fixed classes like
'button[class~="voteButton"]'
And don't forget check your selector on page in console before run puppeteer:
document.querySelector('button[class~="voteButton"]');
then you can run puppeteer:
await page.waitForSelector('button[class~="voteButton"]');
await page.click('button[class~="voteButton"]');
You might have some other problem with your use case as your script should already work as expected: clicks the first element instance with the given selector (if there is a 2nd or 3rd instance: it won't touch them).
It is possible to select elements based on their specific attributes (including aria attributes) with Attribute selectors:
await page.waitForSelector('button[aria-label="upvote"]')
await page.click('button[aria-label="upvote"]')
I have a series of elements as:
<li data-formatted="12:00am" data-minutes="0">12:00am</li>
<li data-formatted="1:00am" data-minutes="10">1:00am</li>
<li data-formatted="2:00am" data-minutes="20">2:00am</li>
.
.
<li data-formatted="12:00pm" data-minutes="80">12:00pm</li>
The issue I face is of finding any one of the element from this list of li. I can use driver.findElements() only when I am atleast able to identify it using any property tag since it does not have any like name, css or id.
Any suggestions on how to find an element using data-formatted tag would be of great help. Thanks.
You can use CssSelector or XPath to find them.
Here are example expressions to find li element which has attribute data-formatted and the attribute contains "m":
driver.findElements(By.cssSelector("li[data-formatted*='m']"));
driver.findElements(By.xpath("//li[contains(#data-formatted, 'm')]"));
You can select elements with data attributes through querySelectorAll() API and access all element's data attributes directly with vanilla JS standard dataset API.
In your case, to get the elements with data-formatted attribute you may do like
var formettedEls = document.querySelectorAll("[data-formatted]");
or
var El1AM = document.querySelectorAll("[data-formatted = '1:00am']");
or as another option you can search among the formattedEls for your specific one through the dataset API like
function findData(set, searchDataProp, searchData){
Array.prototype.forEach.call(set, function(el){
(el.dataset[searchDataProp] == searchData) && console.log(el.dataset[searchDataProp], searchData);
});
}
findData(formattedEls, "formatted", "12:00am");
So, I'm trying to access the input field hidden deep within a paper input field. This is so that I can change the input type and so on. After inspecting the element, You can see that it has 2 shadow roots as explained in this blog. However, the method explained in that blog no longer works. I'm using dart version 1.5.3, polymer 0.12.0-dev.
I try to query the paper input like so:
querySelector('#paper-input-id').shadowRoot.querySelector('#input');
However, that returns null. This is because the shadowRoot property only returns the first shadow root. The input field is buried in the second shadow root. I guess what I am asking is if there is a generic way to select the nth-shadow root of an element?
This seems exactly how I did it in the unit test for <core-input>
var input = dom.document.querySelector("#changeAndInputEvent") as CoreInput;
var domInput = (input.shadowRoot.olderShadowRoot.querySelector('#input') as dom.InputElement);
what also should work is
var domInput = (dom.document.querySelector("#changeAndInputEvent /deep/ #input");
or
var domInput = (dom.document.querySelector("* /deep/ #changeAndInputEvent /deep/ #input");
when the paper-input itself is inside a shadow-dom
Instead of using shadowRoot and olderShadowRoot, which may change if for whatever reason paper-input decides to inherit something new that then inherits from core-input, try using the more generic shadowRoots map (note the 's'):
querySelector('#paper-input-id').shadowRoots['core-input'].querySelector('#input');
I'm developing a rails 3.0.9 app, I'm using "accept nested attributes
for" to add dynamically new "child" items to its "parentW. the thing is
every child has the same id (html attribute), and I need every child with its own id,
because I need to make some jquery functions to work with them.
Is there a way to achieve this?
Tanks for your help
Adding an new element to a Nested Form was handled brilliantly in a Railscast. In it, Ryan uses javascript to replace the ID attribute with something more meaningful.
Hope this helps.