I have a GoogleMeets extension that will help with attendance of persons inside the meet. (It's Google Meet Attendance - https://github.com/al-caughey/Google-Meet-Attendance)
After I open the webpage with selenium webdriver and interact with a icon element to show the textarea when I try to interact with this textarea it I get Exception: Element Not Interactable or Cannot set property of 'innerText' of null when using IJavaScriptExecutor
NOTE
Functions names are different because i made a wrapper class around the IWebDriver Object
The HTML code of page and TextArea
The HTML code of page and TextArea:
<!DOCTYPE html>
<html lang="ro" dir="ltr"> >
<head>...</head>
<body jscontroller="pjice" jsaction="rcuQ6b: npT2md; click:FAbpgf; auxclick:
Abpgf; mousedown:.CLIENT; keydown:.CLIENT;UjQMac:.CLIENT;WINJic:.CLIENT;PDJFbb:.C
LIENT; AbmZie:.CLIENT; keyup:.CLIENT; keypress:.CLIENT;nHjqDd:.CLIENT; Lhiqec:.CLIE
NT;VSCbUd:.CLIENT;GvneHb:.CLIENT;qakode:.CLIENT" class="EI1Dfe">
<script aria-hidden="true" nonce>
window.wiz_progress && window.wiz_progress();
</script> >
<div class="MCCOAC IqBFM ecJEib EwZcud cjGgHb d8Etdd LcUz9d" id="yDmHºd" style="bottom: auto; right: auto; width: 1318px; height: 870px;">...</div>
<div class="MhØNND Mp270b xbg16e mistle" jsaction="click:.CLIENT" style="vi
sibility: visible;">...</div>
<div aria-live="polite" aria-atomic="true" style="position: absolute; top:
-1000px; height: 1px; overflow: hidden;"></div>
<div id="gma-attendance-fields" data-generate-files="both" class data-auto- add="true">
<div id="gma-class-list-div"> >
<p id="gma-class-list-header" class="gma-header" style="display: block;
">...</p> >
<p id="p-attendance-summary" title="Not Monitoring Attendance!">.</p>
<textarea id="class-notes" title="If you want to add any notes related
to this class..." placeholder="Enter any notes specific to this clas
S." X/textarea> >
<p id="invited-list-help" class>...</p>
<textarea id="invited-list" title="Pick, paste or type your class list
into this field" placeholder="Your class list goes here.
Click the blue question mark below for help." classx</textarea> == $0 >
<div id="ema-class-list-buttons" class></div>
CODE
public void start_bot()
{
this.setDriverTimeout(60);
if (this.driver.WindowHandles.Count > 1)
{
this.driver.SwitchTo().Window(this.driver.WindowHandles[1]);
}
try
{
IWebElement classroom = this.findElementByXPath("//*[#id='class-list-edit']");
//classroom = this.findElementByXPath("/html/body/div[3]/div[1]/p[1]/select");
while (!classroom.Enabled && !classroom.Displayed)
{
classroom = this.findElementByXPath("//*[#id='class-list-edit']");
}
classroom.Click();
Thread.Sleep(5000);
classroom = this.findElementByClassName("being-editted");
// this.driver.SwitchTo().ActiveElement();
IJavaScriptExecutor js = (IJavaScriptExecutor)driver;
js.ExecuteScript("document.querySelector('textarea.being-eddited').innerText='Deoanca Rares'");
classroom.SendKeys("John Doe");
Console.WriteLine("Found Element");
// IJavaScriptExecutor js = new IJavaScriptExecutor();
}
catch (Exception ex)
{
IWebElement classroom = this.findElementByXPath("//*[#id='class-list-edit']");
while (!classroom.Enabled && !classroom.Displayed)
{
classroom = this.findElementByXPath("//*[#id='class-list-edit']");
}
classroom.Click();
// classroom = this.findElementByXPath("//*[#id='invited - list']");
classroom = this.findElementByClassName("being-editted");
Thread.Sleep(5000);
classroom.Click();
classroom.SendKeys("John Doe");
Console.WriteLine("Found Element");
}
}
Related
This question already has answers here:
Add "Search Area" outline onto google maps result
(5 answers)
Closed 5 years ago.
I want to highlight 2 places in google maps like the image below(could not show two places highlighted, i have just shown the border style that i will implement).
I want to show border of place exactly like the image below.
I want to dynamically mark places based on place name.
For example I don't have lat long values so ,so I have to search by name of
place.
Right now, to do this using the Google Maps Javascript API, you'll need external data to show the borders of each place. Having it internal to the Javascript API is already being requested here in Google's Issue Tracker: https://issuetracker.google.com/issues/35816953
As a workaround though, you can use the Maps Embed API to mimic the behavior you outlined in your post.
Here's a sample:
Be sure to replace YOUR_API_KEY_HERE with your own API key.
var input = document.getElementById('location');
var autocomplete;
function initPlaces() {
autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.addListener('place_changed', function() {
var place = autocomplete.getPlace();
if (!place.geometry) {
alert('Error with your search for ' + place.name);
}
if(place.place_id) {
markLocation(place.place_id);
}
})
}
function markLocation(placeId) {
var url = 'https://www.google.com/maps/embed/v1/place?key=AIzaSyCD0rWgXRVBa7PgaTWXVp_gU51pgHGviYY';
var placeStr = '&q=place_id:';
var iframe = document.getElementById('iframe');
placeStr += placeId;
url += placeStr;
iframe.src = url;
}
var onSubmitHandler = function(e) {
e.preventDefault();
//markLocation();
}
document.getElementById('form').addEventListener('submit', onSubmitHandler);
input {
height: 2rem;
border-radius: 2px;
border-style: none;
border: 1px solid #e2e2e2;
padding-left: 1rem;
}
.places {
height: 100px;
}
#map {
height: 100%;
}
#location {
width: 400px;
}
.map-frame {
width: 100%;
height: 500px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="places">
<form id="form" autocomplete="off">
<input id="location" type="text" placeholder="Enter a location">
</form>
</div>
<div class="map-frame">
<!-- Be sure to replace YOUR_API_KEY_HERE with your actual API key -->
<iframe width="100%" id="iframe" height="100%"frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/place?q=place_id:ChIJ-QB6d6K5lzMRxi-hKfTINm0&key=YOUR_API_KEY_HERE" allowfullscreen></iframe>
</div>
<!-- Be sure to replace YOUR_API_KEY_HERE with your actual API key -->
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY_HERE&libraries=places&callback=initPlaces" async defer></script>
</body>
</html>
An external jsbin link here as well if you want to try it out: jsbin
Here's the documentation of the Maps Embed API in case you want to pursue that track: https://developers.google.com/maps/documentation/embed/start
Hope that helps!
I want select Iframe with id="iframe00237" and data inside it:
This is HTML:
<iframe src="http://example/iframe/v2.html?id=5225dddd-588a-49c2-961e-e3417cf5a728 scrolling="no" frameborder="0" marginwidth="0" marginheight="0" width="100%" height="100%" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true" id="iframe09328" class="sm_iframe"></iframe>
<body>
<div>
<iframe src="http://example.com/main?id=aab0619b-a938-4f00-b545-742fff5e1118&crtdt=1461214262& scrolling="no" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen="allowfullscreen" id="iframe05443" class="sm_iframe" style="left: 0px; top: 0px; width: 730px; height: 411px;"></iframe>
</div>
<div>
<iframe src="http://example.com/main?id=5225dddd-588a-49c2-961e-e3417cf5a728& scrolling="no" frameborder="0" marginwidth="0" marginheight="0" allowfullscreen="allowfullscreen" id="iframe00237" class="sm_iframe" style="left: 0px; top: 0px; width: 811px; height: 456px;"></iframe>
</div>
</body>
Iframe src="url" url is random..
I'm finding in Stackoverflow and try with code:
//Select parent frame
IWebElement parentFrame = driver.FindElement(By.XPath("//iframe[#id='iframe09328']"));
driver.SwitchTo().Frame(detailFrame);
//Current we on detailFrame continues to go to childFrame.
IWebElement childFrame = driver.FindElement(By.XPath("//iframe[#id='iframe00237']"));
driver.SwitchTo().Frame(childFrame);
In debug mode, parentFrame and childFrame always null values.
How to resolve my problem? I also try FindElement by ID.
In case the ID is static, you can use By.Id(). See code below:
IWait<IWebDriver> wait = new DefaultWait<IWebDriver>(driver);
wait.Timeout = TimeSpan.FromSeconds(10);
wait.PollingInterval = TimeSpan.FromMilliseconds(300);
By by = By.Id("iframe09328");
try
{
// Switch to the parent iframe
wait.Until(d => d.FindElements(by).Count > 0);
IWebElement parentFrame = driver.FindElements(by).First();
driver.SwitchTo().Frame(parentFrame);
// Switch to the inner iframe
by = By.Id("iframe00237");
wait.Until(d => d.FindElements(by).Count > 0);
IWebElement childFrame = driver.FindElements(by).First();
driver.SwitchTo().Frame(childFrame);
}
catch (Exception)
{
throw new NoSuchElementException("Unable to find element, locator: \"" + by.ToString() + "\".");
}
If this doesn't work, please give us the exception "Unable to find element, locator: ......"
I want to find a tag in selenium 2 with C#, but I can't get access to div tag with id or xpath or etc. This is my code:
driver.FindElement(By.Id("captcha"));
and the web source is:
<body id="mainBody">
<div class="top_bar" style="min-height:210px">
<div class="m_sidebar_view">
<div id="captcha" style="position: relative; float: right; margin: 6px 35px 0 0; overflow: auto;"><div/>
</div>
</div>
</body>
Captcha is often loaded within an iframe (see, for instance, the google recaptcha demo source code). Switch to it before searching for the captcha element:
driver.SwitchTo().Frame("frame_name_or_id");
Although it's unclear what your problem is, one of the most popular mistakes is not waiting for the element. So try to wait:
WebDriverWait wait = new WebDriverWait(driver, TimeSpan.FromSeconds(10));
IWebElement myDynamicElement = wait.Until<IWebElement>((d) =>
{
return d.FindElement(By.Id("captcha"));
});
My code have the problem of embedded for loop can't access the variables. I am using C#. Here is the codes:
<% List<ProductPacking> categoryList = new List<ProductPacking>();
categoryList = packBLL.getAllCategory();
foreach(ProductPacking cl in categoryList) { %>
<!-- FIRST COLLAPSIBLE PANEL EXTENDER -->
<asp:Panel ID="pHeader1" runat="server" CssClass="cpHeader">
<!-- First collapsible panel extender header -->
<div class="form-group" style="background-color: #ffb848; height: 30px; vertical-align: middle">
<div class="col-md-3">
<div style="float: left; color: White; padding: 5px 5px 0 0">
<%= cl.categoryName; %>
</div>
However, at this line: <%= cl.categoryName; %>, it told me the name cl does not exist in current context. I wonder why is it so.
I think is the way of how you are closing the tags in this case is the for each ends before the elements you want to render, try to close that at the end of the html to display and avoid using asp tags as well.
try something like
<%
StringBuilder sb = new StringBuilder();
List<ProductPacking> categoryList = new List<ProductPacking>();
categoryList = packBLL.getAllCategory();
foreach(ProductPacking cl in categoryList) {
sb.AppendFormat("<div>{0}</div>",cl.categoryName);
//some more html here
}
response.write(sb.ToString());
%>
but I'd prefer to use a grid or another similar control and customize the row template to make my life easier
I have a link,When that link clicked then show Hidden div content.But the problem is next time click i need to Collapse the div.
Here is my Hidden DIV
<div id="divHiddenContainer" style="display: none;">
<div id="divItem1"> <span">
</span></div>
Here is the Link
Read More
Here is Javascript
<script type="text/javascript">
$(".aItemLnk").click(function () {
var id = $(this).attr("id").replace(/^.(\s+)?/, "");
var contentTobeLoaded = $("#divItem" + id).html();
$('#ajax').html(contentTobeLoaded).fadeIn(100000, function () {
});
});
This is how I do mine.
Javascript
<script type="text/javascript">
$(function () {
$('.dragbox')
.each(function () {
$(this).hover(function () {
$(this).find('h2').addClass('collapse');
}, function () {
$(this).find('h2').removeClass('collapse');
})
.find('h2').hover(function () {
$(this).find('.configure').css('visibility', 'visible');
}, function () {
$(this).find('.configure').css('visibility', 'hidden');
})
.click(function () {
$(this).siblings('.dragbox-content').toggle();
})
.end()
.find('.configure').css('visibility', 'hidden');
});
</script>
HTML
<div class="dragbox" id="Widget2" runat="server">
<h2 style="font-size: 14pt">Heading Goes Here</h2>
<div class="dragbox-content">
//Information Here
</div>
</div>
So when you click on the Header (h2), it hides and when you click on it again, it is visible. You will also need some css.. here is mine.
CSS
.column{
width:49%;
margin-right:.5%;
min-height:300px;
background:#e2e2e2;
float:left;
}
.column .dragbox{
margin:5px 2px 20px;
background:#fff;
position:relative;
border:1px solid #ddd;
-moz-border-radius:5px;
-webkit-border-radius:5px;
}
.column .dragbox h2{
margin:0;
font-size:12px;
padding:5px;
background:#f0f0f0;
color:#000;
border-bottom:1px solid #eee;
font-family:Verdana;
cursor:move;
}
.dragbox-content{
background:#fff;
min-height:100px; margin:5px;
font-family:'Lucida Grande', Verdana; font-size:0.8em; line-height:1.5em;
}
.column .placeholder{
background: #f0f0f0;
border:1px dashed #ddd;
}
.dragbox h2.collapse{
background:#f0f0f0 url("../Images/collapse.png") no-repeat top right;
}
.dragbox h2 .configure{
font-size:11px; font-weight:normal;
margin-right:30px; float:right;
}
I use the 'dragbox' in a sortable jquery as well. So as you can tell, you will not need the .columns, but I showed them just incase you go that route and would like to use div's as columns. If you do, all you need to do is add
<div class="column" id="column1" runat="server">
</div>
And then place the 'dragbox' within that. You can have 2 of these 'columns'
Hope this helps.
You need a condition (if, else) to call fadeIn when the div is hidden, and fadeOut when the div is shown!
Because your code only call fadeIn so the first time, it will fadeIn and the next call it will also fadeIn, so it will stay there.
I don't know in JQuery but that's how I do it in javascript to know if the div is shown or hidden:
if(div.style.display == 'block') {
}
//call fadeOut
else {
//call fadeIn
}
Just use fadeToggle instead:
$(".aItemLnk").click(function () {
var id = $(this).attr("id").replace(/^.(\s+)?/, "");
var contentTobeLoaded = $("#divItem" + id).html();
$('#ajax').html(contentTobeLoaded).fadeToggle(100000, function () {
});
});
You can use the toggle method for your desired div inside the click event of a hyperlink.
I've made an example for you in this fiddle > jsfiddle.net/MK68L
Hope it helps