I know that $$eval gets an array and $eval gets the first element that encounters.
But I have the following problem/question: how can I get an array from the first element that Puppeteer finds? I need an array with the content of div of the first figure tag.
<div>
<figure class="test">
<div></div>
<div></div>
</figure>
<p></p>
<figure class="test">
<div></div>
</figure>
</div>
How can I tackle this?
Well that should be super easy.
For accessing the first child div:
const requiredEl = await page.$eval('figure', _figure => _figure.firstChild);
For accessing all children div:
const requiredEls = await page.$eval('figure', _figure => _figure.children);
Related
There are 10 items. I need to click on the hidden element (item-icon) in the item_9. The hidden element appear after hovering on him. I have the same situation and the same code operate as expected. But in this situation code operate as unexpected and get Error in the console.
How can I click on the item-icon element in the item_9 element?
html:
<div class="item">
<div class="w">item_1</div>
<div class="d">
<div style="display:none" class="item-icon" role="button" tabindex="-1">
button1
</div>
<div style="display:none" class="item-icon">
button2
</div>
</div>
</div>
<div class="item">
<div class="w">item_2</div>
<div class="d">...</div>
</div>
...
<div class=""><div class="item">
<div class="w">item_10</div>
<div class="d">...</div>
</div></div>
js:
let findItems = await driver.findElements(By.className("item"));
let items = findItems.map(async elem => await elem.getText());
let allItems = await Promise.all(items);
await driver.findElement(By.xpath(`//div[#class='item'][9]//div[#class='item-icon'][2]`)).click();
Console Error:
{ NoSuchElementError: no such element: Unable to locate element: {"method":"xpath","selector":"//div[#class='item'][9]//div[#class='item-icon'][2]"}
Please try using JavascriptExecutor to click on hidden elements.
Sample code in Java:
JavascriptExecutor js = (JavascriptExecutor)driver;
js.executeScript("arguments[0].click();", element);
If the element exists, but you get the error 'NoSuchElementError', it means that the element you are trying to find in the code exists inside an 'iframe' tag in the webpage.
e.g.
<iframe id="iframeID">
<div class="item">
<div class="w">item_2</div>
<div class="d">...</div>
</div>
...
</iframe>
What you need to do is to switch to that iframe, then find the element with class name "item".
driver.switchTo().frame("iframeNameOrID"); //you can use name or id for that iframe
//OR driver.switchTo().frame(0); the zero is the first iframe, you can use 1 for 2nd and so on...
let findItems = await driver.findElements(By.className("item"));
driver.switchTo().defaultContent(); //switch back to the main webpage
//...
I assume that you have seen the code before hovering over it, and the code given by you is also valid if you don't hover over the element. I am answering according to the provided data :-)
IF THERE IS NO IFRAME...
Hover using selenium
Start the page and without hovering, use Chrome DevTools to select that area which should be hovered. This will show you the element which you need to hover. You can perform a element.click() on that element, which will then execute the java script to create your desired element "item".
I hope this will help... Leave questions in the comments :-)
I am trying to create an array which holds all the href's within the main element using javascript. Now I am not a programmer but I figured I would try and approach it in either of the two ways:
a) Isolate the main element (document.getElementsByTagName("main")) and then try to extract all href's from this object.
b) Create an array of all href's on the page (document.links) and then check for every href whether it has main as a parent node.
So far I haven't found a solution for either approach. Can anyone help me with a code fragment that creates an array with all href's within main? Thanks a lot in advance. I already spent hours figuring it out myself xl
Example HTML:
<main>
<div id="content">
<div class="classA">
</div>
<div class="classB">
</div>
</div>
</main>
use querySelectorAll
let hrefs = [...document.querySelectorAll('main a[href]')].map(({href}) => href);
console.log(hrefs);
<main>
1
2
<div>
3
</div>
</main>
If you want only children of main, not all descendants
let hrefs = [...document.querySelectorAll('main>a[href]')].map(({href}) => href);
console.log(hrefs);
<main>
1
2
<div>
3
</div>
</main>
I am not so into JavaScript\JQuery and I have the following problem:
Into a page I have some <section> tags, something like this:
<section class="com__section com__section--text functionSection">
<div></div>
</section>
<section class="com__section com__section--text functionSection">
<div></div>
</section>
<section class="com__section com__section--text functionSection">
<div></div>
</section>
Then I have a JQuery script that select one of these section (using a specific logic, but this is not important now), something like this:
var s = section.eq(i);
So s variable contains an object related to a specific <section> tag.
Now my problem is, starting from this s variable, how can I obtain the reference to the inner <div> that is inside this <section>? How can I correctly implement this behavior using JQuery?
Maybe something like this is ?
var div = s.find('div');
Hope it helps.
I am using jsoup to parse an html document. I need to extract all the child div elements. This is basically div tags without nested div tags. I used the following in java to extract div tags,
Elements bodyTag = document.select("div:not(div>div)");
Here is an example:
<div id="header">
<div class="container">
<div id="header-logo">
<a href="/" title="mekay.com">
<div id="logo">
</div> </a>
</div>
<div id="header-banner">
<div data-type="ad" data-publisher="lqm.j2ee.site" data-zone="ron">
</div>
</div>
</div>
</div>
I need to extract only the following:
<div id="logo">
</div>
<div data-type="ad" data-publisher="lqm.j2ee.site" data-zone="ron">
</div>
Instead, the above code snippet is returning all the div tags. So, could you please help me figure out what is wrong with this selector
This one is perfectly working
Elements innerMostDivs = doc.select("div:not(:has(div))");
Try it online
add your html file
add css query as div:not(:has(div))
check resulted elements
If you want only div leafs that do not have any children then use this
Elements emptyDivs = document.select("div:empty");
The selector you are using now means fetch me all the divs that are not direct children of another div. It is normal that it brings the very first parent div, because the div id="header" is not a direct child of a div. Most likely its parent is body.
I can't figure out how to reach a nested div from the outer most element. Here is the html:
<li id="slide1">
<div id="video-container">
<div id=video-holder><div id="thumbnail"></div></div>
<div id=video-title></div>
<div id=video-desc></div>
</div>
</li>
I need jquery that will reach the id thumbnail from the starting id of the slide1
Use find to get the descendant.
$("#slide1").find("#thumbnail")
Basically since it is id you can just do: as id is supposed to be unique no matter where it appears.
$("#thumbnail");
For your scenario you want to use startswith selector to select the dynamic id starts with video_fake and in the 5th
slide.
$('#slide5fake').find('[id^=video_fake]').attr('id', 'newId')
$("#slide1").find("#thumbnail")
try this
<li id="slide1">
<div id="video-container">
<div id=video-holder><div class="thumbnail"></div></div>
<div id=video-title></div>
<div id=video-desc></div>
<div id="video-container">
<div id=video-holder><div class="thumbnail"></div></div>
<div id=video-title></div>
<div id=video-desc></div>
</div>
</li>
<script type="text/javascript">
$('#slide1').find('.thumbnail').each(function(){ });//you can get here two thumbnail
</script>
$("#thumbnail")
will find the thumbnail directly, but I suspect the id for your thumbnail will be repeated down the page, so you really need to be searchind for a class.
$("#slide1.thumbnail")
will do that if you change this line
<div id=video-holder><div id="thumbnail"></div></div>
to this
<div id=video-holder><div class="thumbnail"></div></div>
In case there are more "thumbnails" on your page, it would be better to give it a class. Ids should be unique.
In your given case, it would be sufficient to get it by ID
document.getElementById("#thumbnail")
If you gave it a class
document.querySelector("#slide1 .thumbnail")
would get you the element.
In jQuery the equivalent would be:
$("#slide1").find(".thumbnail");
There are many ways you can do this...
Single selector:
$('#slide1 #thumbnail');
If you already have the slide element:
var slide = document.getElementById("slide1");
// and then:
$('#thumbnail', slide);
Doing a .find() on the #slide1 element
$("slide1").find("#thumbnail");
But since you're using an ID it doesn't make sense to do anything else but finding that single ID, since you shouldn't have more than one element on a page with the same ID
$("#thumbnail");
There are probably more ways.. and what the best method is depends a lot on what you're doing and what the context is...
Good luck