I am trying to automate clicking on a submenu using puppeteer but this doesn't work
var frames = await serv.page.frames();
let lastFrame = frames[frames.length-1];
await lastFrame.waitForNavigation();
await lastFrame.waitForSelector('.reportBuilder-view');
const [more] = await lastFrame.$x("//button[contains(., 'More Actions')]");
await more.click();
console.log(await lastFrame.content());
await serv.wait(1000);
console.log(await lastFrame.content());
console.log('wait for subscribe?')
await lastFrame.waitForSelector('a[title="Subscribe"]');
await lastFrame.click('a[title="Subscribe"]');
I am able to simulate the click on the "More Actions" button by line await more.click();
However, I am not able to initiate a click on a submenu item.
The script fails at line await lastFrame.waitForSelector('a[title="Subscribe"]'); and can't select the proper anchor element.
UnhandledPromiseRejectionWarning: TimeoutError: waiting for selector `a[title="Su
bscribe"]` failed: timeout 30000ms exceeded
I am new to puppeteer and I can't understand why this code doesn't work.
Maybe the problem is that the submenu is embedded in an element with absolute positioning?
outline: 0px; position: absolute; right: inherit; top: 52px; left: 615px;
Maybe it is added to DOM dynamically but why can't it find it since for 30 seconds it is already displayed and added to the DOM?
When I look through output from lastFrame.content() I can see that the element is present in the DOM
<li class="slds-dropdown__item actionBarButto
nGroup-action-item report-action-ReportScheduleAction" id="liVM0LRxvZ-item-3" role="presentati
on"><a aria-disabled="false" href="javascript:void(0);" data-index="3" role="menuitem" tabinde
x="-1"><span class="slds-truncate" title="Subscribe">Subscribe</span></a></li>
Am I doing something wrong here?
I also tried waiting for the XPath but this didn't work either
await lastFrame.waitForXPath("//li[#class='report-action-ReportScheduleAction']/a");
const [li] = await lastFrame.$x("//li[#class='report-action-ReportScheduleAction']");
console.log('try to click the li');
await li.click();
Actually the title is property of the span instead of anchor.
<li class="slds-dropdown__item actionBarButto
nGroup-action-item report-action-ReportScheduleAction" id="liVM0LRxvZ-item-3" role="presentati
on">
<a aria-disabled="false" href="javascript:void(0);" data-index="3" role="menuitem" tabinde
x="-1">
<span class="slds-truncate" title="Subscribe">Subscribe</span>
</a>
</li>
When I click on the span, it works
await lastFrame.waitForSelector('span[title="Subscribe"]');
await lastFrame.click('span[title="Subscribe"]');
Still didn't figure out why li selector doesn't work
Related
I have this in line of code
<a class="btn btn-block btn-lg" ng-class='login.anchorClass' ng-href="{{login.idp_authnrequest_url}}"><img src="{{login.file_name}}"/>{{login.name}}</a>
But this displays url in bottom left which I want to hide ( that's the requirement). Can anyone help with this?
Since those links comes from ng-repeat I tried onclick="location.href='({{login.idp_authnrequest_url}})'"
but that only opens last url on every anchor tag click. Also thought about using button instead of anchor tag but since I have multiple button how would that work?
Welcome to Stack Overflow.
Have you try using jquery:
$(function(){
$("a").each(function (index, element){
var href = $(this).attr("href");
$(this).attr("hiddenhref", href);
$(this).removeAttr("href");
});
$("a").click(function(){
url = $(this).attr("hiddenhref");
window.location.href = url;
})
});
This works for me.
Here the reference answer https://stackoverflow.com/a/56340724/13955999
Situation: I want to remove the anchor tags ( #tag ) from the end of the URL
What I have tried: I have been following "https://www.finsweet.com/hacks/15/" and "https://stackoverflow.com/questions/34175285/removing-anchor-tags-from-url". Its not working out very well though.
Code:
My snippet from the top nav bar
<ul class="nav">
<li class="scroll-to-section">
Home
</li>
</ul>
My use of Id
<div class="main-banner header-text" id="top">
Maybe the way i approached the edits to the navigation bar is wrong.. but im not sure what i need to to do to achieve the goal. Or how I used the classes and IDs is possibly incorrect?
--- Edit 1 ---
this is the snipper of the script im attempting to use to remove the anchor tag from the URL bar of a brower.
$("#js-anchor").click(function (evt) {
evt.preventDefault();
var anchor = $(this).text();
$("html, body").animate(
{
scrollTop: $("#" + anchor).offset().top,
},
1500
);
});
And the html im looking at
<li class="scroll-to-section">
<a id="js-anchor" href="#testimonials" class="active"
>staff</a>
</li>
The experment on it is here:
https://the-md.studio/indexhash.html
EDIT2
My new attempt
<li class="scroll-to-section">
Home
</li>
JS
$(document).ready(function () {
// get the anchor link buttons
const menuBtn = $(".scroll-to");
// when each button is clicked
menuBtn.click(() => {
// set a short timeout before taking action
// so as to allow hash to be set
setTimeout(() => {
// call removeHash function after set timeout
removeHash();
}, 5); // 5 millisecond timeout in this case
});
// removeHash function
// uses HTML5 history API to manipulate the location bar
function removeHash() {
history.replaceState(
"",
document.title,
window.location.origin + window.location.pathname + window.location.search
);
}
});
Just saw this Q. I guess this is what you tried to ask:
// first: get the full url
var hash_url = window.location.href;
// second: simply do a split
// can't go wrong here, because url's that show content are always in correct format
hash_url = hash_url.split('#'); var clean_url = hash_url[0];
alert(clean_url);
There's your clean url!
I have an xml file called file.xml, I want to know how to change the title of the html page that xml file is open in.
For example, if I have the following link in my html file: Link. When I click on that link, the page title is root/file.xml, is there a way to change it? How can I change the title tag <title></title> in that webpage so when I open the xml file in the browser the title is there.
Like this
It will not popup in a snippet but try it on a server
https://plungjan.name/SO/framewindow/
document.getElementById("container").addEventListener("click", function(e) {
const tgt = e.target;
if (tgt.classList.contains("link")) {
const w = window.open("", "_blank");
if (w) { // popup not blocked
const html = `<title>${tgt.title}</title><body style="margin:0; padding:0"><iframe style="height:100%; width:100%; border:0" src="${tgt.href}"></iframe></body>`
e.preventDefault();
w.document.write(html);
w.document.close();
}
// else let the link work on its own
}
})
<div id="container">
<a class="link" title="File #1" href="https://www.google.com/search?q=file1.xml">File1.xml</a>
<a class="link" title="File #2" href="https://www.google.com/search?q=file2.xml">File2.xml</a>
</div>
I have a pop up window that appears on the page randomly. Usually about 20 seconds after I go on a page.
<div class="bluecoreActionScreen" id="bluecoreActionScreen">
<form novalidate="novalidate" class="bluecoreEmailCaptureForm" id="bluecoreEmailCaptureForm" name="bluecoreEmailCaptureForm">
<div class="commonScreenElement" style="width: 550px;height: 500px;display: block;background-color: #181a1cfc;">
<<<< OTHER HTML >>>>
</div>
</form>
</div>
Is the best way to deal with this just to wait for the selector to appear and then click it off?
Or would is there another way to deal with dialogues (popups).
await page.waitForSelector('.bluecoreActionScreen');
Then click it off?
You can use waitForSelector like this:
await page.waitForSelector('.bluecoreActionScreen')
and then remove the element by CSS or DOM after that:
await page.evaluate(() => {
let popupElement = document.querySelector('.bluecoreActionScreen')
// BY CSS DISPLAY NONE
popupElement.style.display = 'none'
// OR BY REMOVE THE ELEMENT DOM
popupElement.parentElement.removeChild(popupElement)
})
I am aware of both :visited and :active css classes, but both does not answer my need!
I want to remain the active link styled with Red Background Color (or whatever design) as long as the related page of the active link is active for the user.
Below is my code:
HTML:
<a class="link1" href="/page-1">Link 1</a>
<a class="link2" href="/page-2">Link 2</a>
<a class="link3" href="/page-3">Link 3</a>
<a class="link4" href="/page-4">Link 4</a>
CSS:
link2:visited {
background-color: red;
}
Or
link2:active {
background-color: red;
}
The :active class will take effect when the user click down the mouse button and end when the user will release up the mouse button.
The :visited class will remain the link with red background even after the user will click on another menu link.
so both :visited and :active css classes does answer my question !!!
The below images will explain more:
Link 2 is active
Link 4 is active
As you can see in the above images when another link on the menu is clicked/visited, the previous link design will be reverted back to its previous state and only the current clicked/visited link will have a red background color as long as its correspondent page is active.
we can use jquery to add class to each link when it is an active state. then we can style the link with the basis of that class.
checkout this link for reference: https://www.w3schools.com/jquery/html_addclass.asp
thank you.
If you can use javascript,
On each page, at the bottom, add:
<script>
var ele = document.getElementsByClassName("link1");
ele[0].style.backgroundColor = "red";
<script>
change the class name for each page: link2 on page 2; link3 on page 3, etc.
I ended up using jQuery and JavaScript as below:
(function ($, window, Drupal) {
$(window).ready(function () {
// Get the current page url.
var pathname = window.location.pathname;
if (pathname == "/path1") {
$('.link1').addClass("active-page");
}
if (pathname == "/path2") {
$('.link2').addClass("active-page");
}
if (pathname == "/path3") {
$('.link3').addClass("active-page");
}
if (pathname == "/path4" || pathname == "/") {
$('.link4').addClass("active-page");
}
});
})(jQuery, window, Drupal);
The above method is working as expected at least for me!
I still needs an advise if this could affect the site performance in a way or another ?