I want the user to be able to select the contents of a element by clicking it once. The code would look like this:
<div onclick="this.xyz()">...</div>
The question is: what method goes where I wrote xyz? I've searched for things like "DOM select object," but the answer is a needle hidden in a haystack of irrelevant hits (or not).
Basically you'd want:
<div onclick="var contents = this.innerText;">foo bar</div>
which would set contents equal to foo bar. Of course, this isn't exactly cross-platform compatible. Firefox expects .textContent instead of .innerText. If you're not opposed to using jquery, then
<div onclick="var contents = $(this).text()">foo bar</div>
would do just as well and be cross-platform.
Related
So my current situation is that I am trying to click on a marker based in a Google Maps window on a webpage. I have successfully located the markers in two manners: element.all(by.css('.angular-google-map-marker')) and element.all(by.repeater('m in map.markers')).
I have proven that I am obtaining the correct elements by changing the location on the Google Map and using count() to retrieve the number of markers present which returns the correct number in every case.
However, when I try to do for example element.all(by.css('.angular-google-map-marker')).first().click(), I receive the following error:
Failed: element not visible
HTML section
<div ng-transclude="" style="display: none">
<span class="angular-google-map-marker" ng-transclude="" ng-repeat="m in map.markers" options="m.options" coords="m.coords" idkey="m.id" click="onMarkerClick"></span>
<span class="angular-google-maps-window" ng-transclude="" coords="activeMarker.coords" options="windowMapOptions" show="windowMapOptions.show" closeclick="closeInfoWindow" templateurl="'gMapInfoWindow.html'" templateparameter="activeMarker"></span>
</div>
Normally elements that trigger some event due to clicking have an attribute like ng-click= foo(), however the markers above only use click= foo(). In addition if you look the line with the div tag, it says display: none, which might explain the visibility error.
My Question: Is there a way to activate the effect of an attribute like click= foo() without clicking on the element directly?
Aside from trying to make an element visible and then clicking, you can attempt clicking "via JavaScript" (there are some differences though - WebDriver click() vs JavaScript click()):
var marker = $('.angular-google-map-marker');
browser.executeScript("arguments[0].click();", marker.getWebElement());
First of all be sure that you can interact with the element when it is visible, you can do this from within the DevTools of your browser, make it visible by adding a display:block. Then check that if you change the value of the selectbox, the value can also be used with Angular Binding.
If so, you can easily make the element visible with Protractor by injecting a piece of Javascript in the page with the following command:
browser.executeScript('document.querySelector("div").style.display = "block"');
This results in a promise, so be aware of that!
I need to create the element and then delete it. Is there a way to find the element by it's text after it was created?
The xpath of the element is //div[#id='mif-tree-6']/span/span[3].
You can use xpath for it for example. Like:
//div[#id='mif-tree-6']//span[contains(text(),'your_text_here')]
UPDATE
Please provide an example of your html. It is possible to find a parent of your element with xpath and after that to find all the childs. For example your html =
<div id='lol'>
<div>first_item</div>
<div>second_item</div>
<div>third_element</div>
</div>
You get an array of elements with xpath =
//div[contains(text(),'first_')]/../div
So you can do something like:
click | //div[contains(text(),'first_')]/../div[2]
BUT if there are a lot of brothers-elements to find by text of one sibling it will be necessary to use loop to get every of them.
Once again. If you will provide full information about what are you doing and an example of your html it will be much easier to suggest.
Seems like it should be straightforward but I can't seem to get to the bottom of it.
Here's the HTML I'm working with:
<li id="a" class="FILElevel3" onclick="changeMenu("b")">
<a onclick="stopBubble(event);" href="javascript:LinkPopup('/sub/URL.html')">Visible Text</a>
I'm able to find the element using XPaths:
my $returned_asset = $sel->find_element("//*[\#class='LINKlevel3']");
And I can verify this works because I'm able to extract the visible text from it:
my $returned_name = Selenium::Remote::WebElement::get_text($returned_asset);
I just can't seem to find the sequence to pull the HREF attribute from the element to put the link's URL into a verifiable string. Should I be able to do this using WebElement's get_attribute() method? I've tried variations on this:
my $returned_URL = $returned_asset-> Selenium::Remote::WebElement::get_attribute("a/href");
...where I've plugged in everything I could think of for that "a/href" string. What should go in there?
In the end I'd like to be able to put "javascript:LinkPopup('/sub/URL.html')" into a string and verify that my URL is in there.
have you tried
my $returned_asset = $sel->find_element("//*[\#class='LINKlevel3']/a");
my $returned_URL = $returned_asset->Selenium::Remote::WebElement::get_attribute("href");
I have a form in a module that I want to appear in a modal window. Depending on the id the window may be blank, or if it does show any content all classes and ids are removed, so I can't validate or style the form.
Truncated Code:
...
<div id="feedback">
<div class="feedbackinner">
<!-- form module -->
<div id="contact-wrapper">
<!--form elements with ids and classes-->
</div>
<!-- end module -->
</div><!-- end .feedbackinner -->
</div><!-- end #feedback -->
This triggers the modal window without any ids or classes (using Firefox Web Developer outline current elements):
Click for ugly unstyled form that won't validate
This triggers a blank modal window:
Click if you like staring at a blank white box
So most importantly how do I keep all the ids and classes inside the modal window, and why won't calling the parent div work?
( As a work around I moved the form to a component view then called it using handler: 'iframe' instead of clone. I still want to know what's going on with the modal window. )
Thanks!
not seen the code but implications of using Element.clone on an element are apparent. By nature of HTML, id is meant to be unique. This means you are not really supposed to have more than one element with the same id injected into the DOM at the same time.
MooTools mirrors the sentiment correctly by implicitly removing the id from any element it creates a clone of:
https://github.com/mootools/mootools-core/blob/master/Source/Element/Element.js#L860
the .clone method accepts optional arguments which allow you to override stuff:
clone: function(contents, keepid){ - see http://mootools.net/docs/core/Element/Element#Element:clone as well.
cloned elements also lose all the events you may have assigned to them (but cloneEvents can help with that).
I would recommend looking at the squeezebox implementation and double check that the clone is implemented in the intended way. A better practice may be to adopt and re-attach the elements instead - or to copy the whole innerHTML (though this will once again cause non-delegated events to fail).
Sorry for the bad wording of the title, but here's my problem. Suppose I have a list where every item has a class:
<ol>
<li class="chapter">Chapter 1</li>
<li class="chapter">Chapter 2</li>
...
I want to select the item which is corresponding to make the user's current chapter, which is known by javascript, in bold. So if the user is on Chapter 2 I would do something like:
$(".chapter:eq(2)").css("font-weight", "bold");
But I can't do
$(".chapter:eq("+currentChapter+")").css("font-weight", "bold");
as it gives me Uncaught SyntaxError: Unexpected identifier
Any help would be appreciated.
Edit: I'm using a template to insert the variables but I have verified that currentChapter is in fact defined and the number I expect it to be.
function fetchContent(startSlide) {ldelim}
var chapterSize = {$chapterSize};
var currentChapter = {$chapter};
var chapterName = "{$chapterName}";
alert(typeof(currentChapter)); // number
alert(currentChapter); //e.g. 3 works
alert(currentChapter + "aaa"); //e.g. 3aaa
$(".chapter:eq("+currentChapter+")").css("font-weight", "bold"); // doesn't work
Try a different approach, fetch all elements and then select only the one you want (I know it's best to select your element right in the selector, but just to try it out).
$(".chapter").eq(currentChapter).css("font-weight", "bold");
Also, looking at your code, it seems like currentChapter is a local variable inside the fetchContent function. Are you sure you can access that variable when you are calling the jQuery function? Try to check the existence and value of the currentChapter variable right before calling the jQuery function which is causing you problems.
EDIT
From the jQuery documentation jQuery :eq() selector
Because :eq() is a jQuery extension and not part of the CSS
specification, queries using :eq() cannot take advantage of the
performance boost provided by the native DOM querySelectorAll()
method. For better performance in modern browsers, use
$("your-pure-css-selector").eq(index) instead.