The following code only appears when the "popup" window shows up. I'm trying to automate the clicking action on the "ok" button but I can't find a "button id" anywhere.
<div class="x-window-mc" id="ext-gen89"><div class="x-window-body" id="ext-gen86" style="width: 448px; height: auto;"><div id="ext-gen105" class=" x-dlg-icon"><div class="ext-mb-icon ext-mb-warning" id="ext-gen106"></div><div class="ext-mb-content"><span class="ext-mb-text" id="ext-gen107">Your session will finish in 1 minute. Would you like to extend it?</span><br><div class="ext-mb-fix-cursor"><input type="text" class="ext-mb-input" id="ext-gen108" style="display: none;"><textarea class="ext-mb-textarea" id="ext-gen109" style="display: none;"></textarea></div></div><div class="x-progress-wrap x-hide-display" id="ext-comp-969222"><div class="x-progress-inner"><div class="x-progress-bar" id="ext-gen111" style="height: 16px; width: 0px;"><div class="x-progress-text x-hidden" id="ext-gen112" style="z-index: 99; width: 0px;"><div id="ext-gen114" style="width: 348px; height: 18px;"> </div></div></div><div class="x-progress-text x-progress-text-back" id="ext-gen113"><div id="ext-gen115" style="width: 348px; height: 18px;"> </div></div></div></div><div class="x-clear" id="ext-gen116"></div></div></div></div>
Tried inspecting the element but there is no "button Id" anywhere to be found. Also tried using power automate recording feature so it could identify it for me, there it is recognized as "Button 'o'"
Any solution is welcome, either javascript or powerautomate.
Related
I implemented Add to Calendar dropdown button in a web page
<div class="dropdown" style="display: inline;">
<button target="_blank" class="btn btn-default dropdown-toggle" data-toggle="dropdown" style="border: 1px;border-radius: 2px;padding: 5px 10px;max-height: 30px; background-color: #004FBF;"><i class="material-icons" style="color: #FFFFFF">event</i> <span style="font-size: 12px;font-family: RobotoMedium;color:#FFFFFF;line-height:14px;letter-spacing:0px;border:1px;position: relative;top: -8px;">Add to Calendar</span></button>
<ul class="dropdown-menu" style="margin-top: 12px;">
<li style="padding: 5px;"><a target="_blank" href="http://www.google.com/calendar/event?action=TEMPLATE&text={{encode title}}&dates={{calendarFormat sessionStartTime}}/{{calendarFormat sessionEndTime}}&details={{calendarDetail _id}}&location={{location _id}}&trp=false&output=xml" ><i class="fa fa-google" style="color: #000000;padding: 5px;font-size: 18px;"></i><span style="font-size: 14px; font-family: RobotoRegular; color: #464646; letter-spacing: 0;height: 16px;width: 45px; line-height: 16px;">Google</span></a></li>
<li class="addToIcalendar" style="padding: 5px;" ><a target="_blank" href="/ics/{{getOrgId}}/{{getEventId}}/{{getSessionId}}" download><i class="fa fa-apple" style="color: #000000;padding:5px;font-size: 18px;"></i><span style="font-size: 14px; font-family: RobotoRegular; color: #464646; letter-spacing: 0;height: 16px;width: 45px; line-height: 16px;">Apple</span></a></li>
<li class="addToIcalendar" style="padding: 5px;"><a target="_blank" href="/ics/{{getOrgId}}/{{getEventId}}/{{getSessionId}}" ><img src="/images/outlook.png" height="19" width="19"><span style="font-size: 14px; font-family: RobotoRegular; color: #464646; letter-spacing: 0;
height: 16px;width: 45px; line-height: 16px;padding: 5px;">Outlook</span></a></li>
<li class="addToIcalendar" style="padding: 5px;"><a target="_blank" href="/ics/{{getOrgId}}/{{getEventId}}/{{getSessionId}}"><i class="fa fa-yahoo" style="color: #000000;padding:5px;font-size: 18px;"></i><span style="font-size: 14px; font-family: RobotoRegular; color: #464646; letter-spacing: 0;
height: 16px;width: 45px; line-height: 16px;">Yahoo</span></a></li>
</ul>
</div>
In a similar way, I want to create in Welcome email but it is not working as expected.
The output of the Add to Calendar in the email is
The dropdown items are by default displayed not after clicking the button. The icons are not displayed as expected
The same code in the email body is not working. Please help and thank you!
Dropdowns and really anything with a click event are very tricky to code in an email because you can't use JS, plus it may not work in all clients. My suggestion is to use something like AddEvent in particular their Direct URL method as the regular button will only work on a webpage not an email. Using the direct url method you can make a CTA in your email that will link out to a webpage created by AddEvent with info on the event and add to calendar links.
Dropdowns won't work in most emails, but there are several things you can do to explore.
First, you should attach the .ics file. Gmail for example pulls that out and makes it super easy to add to a person's calendar.
Second, you have a default button that goes to the .ics download. This will be so that people don't miss the attached .ics file, and make it clear what it is for.
Third, you may want to include direct calendar links for Gmail and Yahoo. These are specific URLs that will take a user to the webmail versions of their email. This may not be suitable from mobiles - you'll need to test the experience. But seeing as Gmail makes it really easy and visible when you attach the ics file, there's no real reason to muck around with that.
Litmus have a write up on the specific code for that (it's complicated), and some URL generation tools. https://litmus.com/blog/how-to-create-an-add-to-calendar-link-for-your-emails, Gmail: http://kalinka.tardate.com/, ICS generation: https://apps.marudot.com/ical/.
I'm using the following code to display a button to clients:
<table role="presentation" cellspacing="0" cellpadding="0" border="0"
style="border-collapse:collapse; background:#005984; width:auto;">
<tbody>
<tr style="height: 30px;">
<td style="height: 30px; padding: 5px 22px;">
<a class="button-a button-a-primary" href="https://google.in" target="_blank"
style="font-family: sans-serif; font-size: 15px; line-height: 15px; text-decoration: none; color: #ffffff;">
Click Here to begin </a>
</td>
</tr>
</tbody>
</table>
Note: My application sends mails to clients, hence client opens the mail on multilple devices/browsers.
Due to security concerns, No idea as of now, on which environment this issue appearing, will be updated if as I get.
My client is seeing an extra checkmark next to the button:
I cannot reproduce with same html as above. But somehow the client can and has sent me the previous screenshot.
Essentially, I'm making a tier-based pricing grid and it needs to look like this:
However, when my code is placed onto the web page (through Wordpress)
a random set of tags are above the '10+ Sessions" pricing box, which messes up the spacing. The tag has a 20px top padding.
It looks like this:
So, I inspected the element and found that there's a set of tags above the box with a top padding of 20px.
<div class="rpt_plan rpt_plan_ori rpt_plan_3 " style="
margin-left: 0px;
width: 565px;
margin-top: 0px;
"><p></p>
<div class="rpt_title rpt_title_3">10+ Sessions</div>
<div class="rpt_head rpt_head_3" style="
height: 152px;
"><p></p>
<div class="rpt_recurrence rpt_recurrence_3">Per Hour</div>
<div class="rpt_price rpt_price_3"><span
class="rpt_currency">£</span>20</div>
</div>
<p><a target="_self" href="#" style="background: rgb(243, 167,
6);cursor: pointer;height: 45px;" class="rpt_foot rpt_foot_3 pum-
trigger">Sign Up</a></p>
</div>
The tags after the opening of the div is the problem.
However, the tags aren't there in the original source code, which is this:
<div class="rpt_plan rpt_plan_ori rpt_plan_3 " style="
margin-left: 0px;
width: 565px;
margin-top: 0px;
">
<div class="rpt_title rpt_title_3">10+ Sessions</div>
<div class="rpt_head rpt_head_3" style="
height: 152px;
">
<div class="rpt_recurrence rpt_recurrence_3">Per Hour</div>
<div class="rpt_price rpt_price_3"><span
class="rpt_currency">£</span>20</div>
</div>
<p><a target="_self" href="#" style="background: rgb(243, 167,
6);cursor: pointer;height: 45px;" class="rpt_foot rpt_foot_3 pum-
trigger">Sign Up</a></p></div>
I just can't figure out why the tags are there.
Could anyone help with this?
Thanks
For anyone with a similar problem, install a plugin called Raw HTML for Wordpress. This prevents Wordpress from attempting to format your Raw HTML and adding random paragraph tags.
I need help with using an iframe. I want to make it so that if someone clicks on a button then they see my widget <iframe src="domain.com" style="border: 0; width: 100%; height: 250px;"></iframe>
Now I use
<form name="form_reg_full" id="form_reg_full" class="clearfix" method="post" action="domain.com">
But it only redirects to domain.com and it doesn't show my widget
If i understood correctly what you've said this code would be ok for you:
Javascrpit
function show_frame(state)
{
document.getElementById("myiframe").style.display = state;
}
Html
<input type="button" onclick="show_frame('block');" value=" show frame" />
<iframe id="myiframe" style="border: 0; width: 100%;
height:250px;display:none; width: 1020px; height: 320px" src="domain.com">
</iframe>
I'm using Watir WebDriver with Chrome and Firefox.
With FF, I can click the following button:
#browser.button(:id => 'btnSubmit').when_present.click
With Chrome, I get the following message:
Selenium::WebDriver::Error::UnknownError: unknown error: Element is not clickable at point (730, 681). Other element would receive the click: <div class="blockUI blockOverlay" style="z-index: 1000; border: none; margin: 0px; padding: 0px; width: 100%; height: 100%; top: 0px; left: 0px; background-color: rgb(0, 0, 0); opacity: 0.38143215011627357; cursor: default; position: fixed;"></div>
If I place a breakpoint on the offending line, the next single step in debug mode works OK.
As an experiment, in case of timeout issues, I changed the code to:
#browser.button(:id => 'btnSubmit').when_present(100).click
This fails in run mode, with the same error.
If I search the entire page, I can't find the "other element" that would receive the click.
<div class="blockUI.............
Here are the divs before and after the button:
<div id="divSaveCancel" class="row">
<div class="six mobile-four columns">
<ul class="button-group even three-up">
<li>
<button id="cancelBtn" type="button" class="small alert button">
Cancel</button></li>
<li>
<button class="small button" id="btnSave" type="submit" name="command" value="btnSaveDraft"
onclick="beforeSubmit();">
Save Draft</button></li>
<li>
<button class="small success button" id="btnSubmit" type="submit" name="command"
onclick="beforeSubmit();" value="btnSubmit">
Save and Continue</button>
</li>
</ul>
</div>
<div class="six mobile-four columns" style="text-align: right;">
<span style="text-align: right; margin-right: 5%; vertical-align: middle; width: 100%;">
<button id="btnSendNotification2" class="small button" type="button">
Send Notification</button></span>
</div>
</div>
Instead of doing:
while (#browser.div(:class => 'blockUI blockOverlay').present?)
sleep(1)
end
#browser.button(:id => 'btnSubmit').click
You should be able to do:
#browser.div(:class => 'blockUI blockOverlay').wait_while_present
#browser.button(:id => 'btnSubmit').click
#JustinKo: I checked both.
Here is a comment from the developer:
It is a modal ‘Please Wait...’ popup that appears for a very short duration of time when the document is being loaded or when some time consuming activity is being performed. That code is dynamically injected by JQuery plug-in and removed soon after. That may be the reason why we can’t find it in the document source.
Remember that the following did not work:
#browser.button(:id => 'btnSubmit').when_present(100).click
But the following works:
sleep(1)
#browser.button(:id => 'btnSubmit').click
So the target element is always present.
The following does not work:
while !(#browser.button(:id => 'btnSubmit').visible?)
sleep(1)
end
#browser.button(:id => 'btnSubmit').click
So the target element is always visible.
The solution is to wait for the "other element" to disappear:
while (#browser.div(:class => 'blockUI blockOverlay').present?)
sleep(1)
end
#browser.button(:id => 'btnSubmit').click