Develop Reference

Ideal selector for Cypress automation Javascript

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.

classList.toggle does not behave how it should be

Started a project to build a website, so far was going good until this problem.
The problem: " I'm tried to make a dropdown menu to show options for a post(delete and edit). I made the dropdown menu and it works perfectly on my laptop(Mac-book pro, testing on google chrome), my partner on this project works on a windows desktop computer. I sent him the files for him to test, and it does not work, it does not toggle the "active" on the drop down element, we tried on his computer, chrome, fire-fox, even on his cellphone (safari and chrome) and it does not work. The click works, we tested it."
I will let you know what we did for knowing what was wrong if we could find out a solution.
Tests:
Click works, we made an alert when it was clicked so we know that it entered to the function we made
We did the console.log of the element after the toggle function. In this case something "weird" happened, the output was the element with the "active" on the class but the element in the dev-tool does not change.
We made it with vanilla JS, I could have used jQuery, normally I like to test things with JavaScript for then doing the jump to jQuery, but as this problem came no time for it.
Other questions you might have, is that there are going to be multiple posts, so this is the way I found to solve my problem to know in which post does the user click to make the correct dropdown.
If someone can help me to solve this I would appreciate, normally I tried to find the solutions by myself but in this case was not possible, I think it goes out of my hands and my knowledge and I find it odd that works on one computer only.
Thank you!.
I will show you the part of the code in case is needed.
HTML:
<div onclick="settings(event)"class="settings" id="1508795">
<i class="fas fa-cog"></i>
</div>
<div class="settingsdropdown" id="post1508795">
<ul>
<li>Edit</li>
<li>Delete</li>
</ul>
</div>
JS:
function settings(e){
var postid=e.currentTarget.getAttribute('id');
var settingslist = document.getElementById('post' + postid);
settingslist.classList.toggle("active");
}
```

I would change the html from:
<div onclick="settings(event)"class="settings" id="1508795">
to (note the this):
<div onclick="settings(this)"class="settings" id="1508795">
Then adjust the function to be:
function settings(e){
var settingslist = document.getElementById('post' + e.id);
settingslist.classList.toggle("active");
}

How to determine correct path to any element of html, to activate script

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.

Click a button made from div with JavaScript?

In Google+, the button that is used to post a comment is made from a div:
<div role="button" id=":1vq.post" class="d-s-r tk3N6e-e tk3N6e-e-qc" aria-disabled="false" style="-webkit-user-select: none; " tabindex="0">Post comment</div>
I think I can click it with:
document.getElementById(":1vq.post").click();
But it says that the element have no attribute click, and I found that onclick is null. So how could I click the button with JavaScript?

EDIT: After a chat with wong2 who started this question and a lot of failed guesses for what this question is really about (the question is quite poorly written), what they are trying to do is to write a Greasemonkey userscript to make the enter key press the Post Comment button in Google+ streams. Since I don't have an invite into Google+ yet, I can't even see the relevant code so not much I can do. This question is not about putting anything related to Google+ in your own site - it's about trying to use Greasemonkey to modify the behavior of Google's site in your own browser.
Earlier attempts to help:
id=":1vq.post" is not a legal CSS id name. You can't use the ":" character in a selector name. This causes multiple issues because not only is it not a legal character, but it's also a meaningful character in the CSS selector syntax. So, I see that you have two issues.
First, your selector logic is not working. Second, as others have said, you can't just assign to click in this way with plain javascript (e.g. no framework).
If you change your selector logic to work correctly, you can get it to work properly (using jQuery) like this:
<div role="button" id="aPost" class="d-s-r tk3N6e-e tk3N6e-e-qc" aria-disabled="false" style="-webkit-user-select: none; " tabindex="0">Post comment</div>
$("#aPost").click(function() {
alert("I was clicked.");
});
And, you can see it in action in this jsFiddle: http://jsfiddle.net/jfriend00/Yfnc7/. Click Run and then click on the Post Comment.

click() applies only to elements like input and button.
http://www.w3.org/TR/DOM-Level-2-HTML/html.html#ID-2651361
onclick would appear in 1990 and not at Google. They should be using addEventListener.
Try to set a breakpoint and see what function is called on click. Then call the function directly.
To trigger a click event handler one can use createEvent plus dispatchEvent.
See example: http://jsfiddle.net/DzVg9/
Note, that Google Plus may actually be using mousedown or mouseup events.

Are you sure you are acurately selecting the button with $(":1vq.post")? Perhaps you need to change it to $("#:1vq.post") or something like that (I'm not sure how JQuery handles the : and . characters).

How to create interactive tags in html file?

I don't know anything about programming, so I'm trying to find out where to start learning + how difficult my problem is. Since I don't have any programming knowledge, I'll try to describe my problem in natural language, hope that is OK.
I have the html file of the penal code (a type of law). It contains many different rules, that are in numbered paragraphs (§ 1, § 4, etc).
Now I want to look at the source code and manually “tag” the paragraphs according to specific criteria. For example all the paragraphs that concern the use of a weapon get the “weapon” tag, or that have a minimum sentencing of 1 year and higher get a “crime” tag, etc.
At the end I want to view an interactive html file in Firefox/Chrome, where I could for example click on a “crime” button, and all §§§ that were tagged with “crime” would appear in bold red, keeping the rest of the document intact. Ideally I would also be able to click on “weapon” and would only see the §§§ tagged with “weapon”, making the rest of the document disappear.
The function it's just for me, so it would only need to work on a Xubuntu 11.04 desktop with Firefox or Chrome. The original source file would be http://bundesrecht.juris.de/stgb/BJNR001270871.html. The code looks strange to me, is there a way to convert it into something more easily manually editable?
Any help would be greatly appreciated. Primarily I don't know where to start learning. Do I need to know HTML, jQuery, or a programming language like Python? Do I need to set up an Apache server on my PC? Perhaps because of my ignorance of programming, this seems like a not too complex function. Am I mistaken in the belief that an amateur could build something like thins maybe one month?

I think this is not very difficult to make, although the tagging process can be quite labour-intensive.
You don't need much programming skills, especially when you want to tag stuff manually. You probably only need basic HTML and CSS and some Javascript to pull this off.
What I would do is the following
Create a local copy of the HTML file (use Save As in your browser)
Manually tag each § by giving it the appropriate tag as a classname
Create a list of all available tags and let javascript filter out the § you'd like to see
Now Step 1 is pretty easy I guess, so I'll go right to Step 2. The paragraphs in the HTML file are formatted according to a certain pattern, e.g.:
<div class="jnnorm" id="BJNR001270871BJNE009802307" title="Einzelnorm">
<div class="jnheader">
<a name="BJNR001270871BJNE009802307"/>Nichtamtliches Inhaltsverzeichnis
<h3><span class="jnenbez">§ 31</span> <span class="jnentitel">Rücktritt vom Versuch der Beteiligung</span></h3>
</div>
<div class="jnhtml">
<div>
<div class="jurAbsatz">
(1) Nach § 30 wird nicht bestraft, wer freiwillig etc.
</div>
</div>
</div>
</div>
What you want to do now is add your tag to the <div> element with the class jnnorm. So the above example would become (if the tag weapon would be appropriate):
<div class="jnnorm weapon" id="BJNR001270871BJNE009802307" title="Einzelnorm">
You do that for each paragraph in the HTML. This will be pretty boring, but okay.
Now Step 3. First create a list of links of all the tags you've just created. How you create lists in html is explained here. Put this at the top of the HTML document. What you want to do with javascript is when you click on one of the links in your list that only the paragraphs with the given class are shown. This is most easily done with jQuery's click event and the show and hide methods.
Updated with jQuery example
Make a menu like this
<ul id="menu">
<li id="weapon">Weapons</li>
<li id="crime">Crime</li>
</ul>
And then use the following jQuery
<script>
$(document).ready(function(){
// When a <li> element inside an <ul> with the id "menu" is clicked, do the following
$('ul#menu li').click(function(){
// Get the id of the <li> element and append a '.' so we get the right name for the tag (class) we want to show
var tag = '.' + $(this).attr('id');
// Hide all elements of class 'jnnorm'
$('.jnnorm').hide();
// Show all elements with the class name of tag we want
$(tag).show();
});
});
</script>
Note: HTML classes are denoted as .classname in jQuery whereas HTML id's are denoted as #idname.
Good luck!

This could be done using purely HTML/CSS and Javascript, so not server would be needed. JQuery would make the javascript side easier.
Basic idea of how to do it:
Use CSS style classes for your "tags"
Have a button for each tag with an onclick handler that uses JQuery to highlight everything with that tag (or make everything else invisible)
The HTML source code actually looks nicely structured, though it could use a few more linebreaks for sub-paragraphs. Any good HTML/XML editor has an autoformat feature that handles this, though you could get any specific format you want using a programming language with convenient text-manipulation facilities, such as Perl, awk or Python.