I have this HTML code
<li class="menu-level-1">
<a href="/Public/app/#/calendar">
<i class="site-menu-icon material-icons">date_range</i>
<span>
Calendar
</span>
</a>
</li>
I don't know exactly what I need to select in CYPRESS for automation to press the calendar button. I don't have a unique css or id class so I can't isolate it from the rest of the menu items. I only have what is seen in this code.
I think you want to click the element <a href="/Public/app/#/calendar"> since it has the href.
There's lots of ways to target it, the one to use depends on what is unique on the page
cy.contains('a', 'Calendar').click() // if the word Calendar only appears on this link
cy.get('a[href="/Public/app/#/calendar"]').click() // specifies by the link itself
cy,get('i.site-menu-icon').parent().click() // if the icon is the unique thing
You can use custom xpath like //*[text()="Calendar"]
If you have found many others on your web page, you can give an index like //*[text()="Calendar"][1] make sure here the index always starts with 1, not 0.
Related
I am using a Content Management System that places a title on the top of all our webpages. If you click on this title, it takes you to the main homepage. This part of the page is something I cannot change, but fortunately I can add CSS and/or Javascript to these webpages.
Is there a way to make it so that clicking on that title, it takes me to a different URL? I cannot edit the HTML that is used to display that title (Posted below)
I have honestly not been able to think up of a solution for this. I can only imagine that it's possible through Javascript, but I'm not sure.
<h1 class="page-title">
<span><a data-home-link="" href="/sites/ww/MyWebPage">My Web Page</a></span>
</h1>
I would like to be able to click on the "H1" element and have it take me to a different webpage, different from "MyWebPage".
If you cannot change the html to add an id you could use document.querySelector or document.querySelectorAll
For example, if it's the only 'a' element with that link address on the page you can use:
document.querySelector('a[href="/sites/ww/MyWebPage"]').setAttribute('href', '/elsewhere/page');
Or if it's the 1st of >1 you can use:
document.querySelectorAll('a[href="/sites/ww/MyWebPage"]')[0].setAttribute('href', '/elsewhere/page');
You can simply give your element a unique id and then edit its attributes with javascript. So you will have:
<a data-home-link="" href="/sites/ww/MyWebPage" id = "someId">
And then with javascript, you can change its attributes like so:
document.getElementById('someId').setAttribute('href',
'/sites/someOtherFolder/..');
Should you want to not display the enforced title at all, just use JavaScript or jQuery to hide class "page-title"
Eg with jQuery
$(document).ready(function () {
$(".page-title").hide();
});
<a class="menu-item-link transition" data-toggle="tooltip" data-placement="right" data-animation="false" data-container=".vertical-menu-tooltip-place" data-original-title="Passengers" id="link3">
<i class="fa fa-user-o"></i>
<span class="menu-title">Passengers</span>
</a>
I have tried using id but its not working. I even tried using x path but still no luck. I am getting error message that no locator found. This is the HTML code. Can anyone help me out?
I am assuming that you are trying to find the span with the text 'Passengers'. Here are several ways to do this:
element(by.css('span.menu-title')); //assumes the span is unique
element(by.css('a.menu-item-link i.fa-user-o span.menu-title')); //More specific if needed
element(by.css('a#link3 span')); //Using Id
w3schools has a good list of css selector for reference. Also, $('selector'); is the same as element(by.css('selector')); which is a useful shortcut when you are using it alot.
If the tag element are static and unique then, You could try
element(by.css[a(data-original-title="Passengers"]));
Assuming the directive values aren't static unique values, where everything is Auto generated in run time, You can try out element(by.xpath(//span[.='Passengers']));
It's worth to check to which tag the inspect element actually points to. If it's span, I would suggest you to go with xpath. If it's <a>, then I would suggest you to go with CSS.
If neither CSS / xpath couldn't identify the elements, then I suppose your page isn't angular and I would suggest you to include
browser.ignoreSynchronization = true;
at the beginning of your test followed by any of the selectors.
Let me know how it goes.
I have one problem to solve. I have to send event from Google Tag Manager, to application of my employeer, my script works fine, but I have a problem with describing 'path' to my element.
For example, its my script:
document.getElementByClassName("name_of_class").setAttribute("onclick", "myapp('event.name_of_event')");
Its working fine for example like this:
<div class="btn btn-primary btn-md outline">
<a href="http://exampleshop.com/shop/">
</a>
</div>
I am just copy-paste name of div class to 'name_of_class' of my script, and its adding my 'oneclik' attribute to tag, so event is sending to my application.
But in another example, like this:
<div clas="quick-access">
<p class="welcome-msg">Default welcome msg! </p>
<div class="shop-access">
<ul class="links">
<li class="first">
My Account</li>
</ul>
</div>
pasting of ANY div class, or li/ul class, cannot 'direct' my script to this element (MyAccount URL href in this case).
So my question is, how to determine correct path to any element of html? I was trying methods like:
document.getElementByTagName("a").getAttribute("My Account")
document.querySelectorAll (a[href=" my_URL "])[0]
and there is no dependency, for one element works one method, for another - does not. Is there any 'universal' method, to discribe where in html run my script?
I am not a programmer, it kind of additional task, so thank you for your understanding.
You can use your browser's development tools to find CSS selectors. I use Chrome, I expect that other browsers have something similar.
Open the developer tools in Chrome. From the toolbar select "Elements". At the top left of the developer toolbar is an icon with a small arrow. Klick it, then select the element in the page you need a selector for. This will now be highlighted in the developer panel that shows the source code. Right click, select "copy" from the context menu and "selector" from the submenu.
Instead of doing custom javascript go to your GTM installation, create a new variable of the DOM type, set it to accept a selector and copy the value you have just retrieved to the field for the css selector. E.g.
I have a like link using twitter bootstrap.
<i class="icon-thumbs-up"></i><span class="badge">${fn:length(page.likes)}</span>
When the user clicks on like link the value within the span should be incremented.
Since i have for every comment a like button i dont know how to perform this task from a single javascript because how i can make sure which span to update.
Also one more thing i have this like button as a hyperlink with href="#". so the page is jumping to the top eveytime i click on the like link. Any idea how i can solve the problem.
For your second problem you could use <a href="javascript:void(0)">
For the first problem, where is your like button? You could always assign a unique id for each of you spans, then onclick the like button , you could use :
document.getElementById("spanUiqueId").innerHTML = parseInt(document.getElementById("spanUiqueId").innerHTML)+1;
For your existing dom structure just go for
$('.icon-thumbs-up').parent('a').click(function() {
var count = parseInt($('badge').text())+1;
$('badge').text(count);
}
If you wanna give id or class to a then replace $('.icon-thumbs-up').parent('a') with whatever new selector
Two things to explain here:
first : parseInt makes sure that number is passed for the incrementation, it is recommended way because of possibility of this creating silent error in js, passing wrong value tu text of your counter and breaking your page
second: I use +1 instead of ++ because ++ and -- tend to be instable depending on lots of things, so I use them never or only in for loop.
You can use jQuery for that:
Make the <a> tag have a class, for example "likeLink":
<a class="likeLink" href="#"><i class="icon-thumbs-up"></i></a><span class="badge">${fn:length(page.likes)}</span>
<script>
$("a.likeLink").click(function() {
$(this).next().text($(this).next().text()+1);
});
</script>
$(this).next() gets the next sibling of the element, in this case the <span>.
For your second question, what do you want the like button to do? If you just want it to appear as a link, you can change the "href" attribute of the link:
<a href="javascript:void('0')">
This would just do nothing, but keep the link.
I have two html pages, when you click on something on the first html, it will go to the second one. What I want to do is to show text according to what you clicked on the first html. different texts are wrapped with different ids. Here's how I wrote:
I'm expecting to see two.html load the text with id "one", but it doesn't work, does anyone know what I did wrong?
Here's the code on second page:
<ul id="menu" class="aaa">
<li><a id="one" href="#">one</a></li>
<li><a id="two" href="#">two</a></li>
<li><a id="three" href="#">three</a></li>
</ul>
And I have a JS file to modify each id:
$("one").observe('click', function() {
$('Pic').writeAttribute('src',"picone.jpg");
$('Bio').update("texthere!");
});
Same for two and three.
Right now if I click on a button on the first page, it will always show
the text and pic for "one", no matter which button I click.
But I want to see the pic and text for "two" if i click on it.
What you want to do is simulate a click on your anchor when the page loads. Since you're using jQuery, the simplest approach (but far form best) would be the following:
$(window).observe('domready', function () {
$(location.hash).click();
});
attach ondomready-event to window. Fetch element with id=one (with jQuery this would be '#one', same as your location.hash would be, very handy in this case), trigger a click on it.
You might need to replace $(location.hash).click(); with $(location.hash).get(0).click() since jQuery tend to return arrays of jQuery-objects.
But a better solution in your case would be to have an event-handler that you can trigger manually, thus circumvent the need of firing events, aswell as drop the anchors and put onclick directly on your li's.
And furthermore, why do you load a second page when all you seem to want to do is to show/hide content dynamically? Do it on the same page...
the #blastuffbla is not an ID but the location hash.
You can acces it by using:
self.document.location.hash
which would return #hash, if you would only want hash you would use:
self.document.location.hash.substring(1)
Hope this helps
tags do not have id's but names to handle the anchors in Urls, you will still need the ID to manage them in JS though.
So your list should be:
<ul id="menu" class="aaa">
<li><a id="one" name="one" href="#">one</a></li>
<li><a id="two" name="two" href="#">two</a></li>
<li><a id="three" name="three" href="#">three</a></li></ul>
Your javascript seemed correct though.
When you say "different ids" how are you setting up your anchors on the 2nd page? The anchor on the 2nd page should look like this:
<a name='one'></a>
Put this right above the text that you want to mark on the 2nd page.
Do you want to scroll the page to the positon of the id "one"? Maybe the content of the page is too small that you cant scroll there. I mean sometimes the browser cant move the element marked with the id to the top of the canvas and looks like it doenst scrolled there. Try to include enough space after the element to make it scrollable to the top of the browser.
Hope that helps.