I am writing a suite of automated UI tests. I have a set of tests that verifies the links in a navbar work correctly, they take an annoying long time because it's loading 2 pages per test and there are many links in the nav bar. I am wondering if it is necessary to actually click the links?
One of the links would look like this, they're all basically the same, all contained inside a list of of <li> elements:
<a href="/projects/7d9162e5-e59c-452e-b9f5-684a2e0f2924/home" data-reactid=".0.2.0.0.0.$0.0">
<span class="icon icon-home" data-reactid=".0.2.0.0.0.$0.0.0"></span>
<span class="label" data-reactid=".0.2.0.0.0.$0.0.1">Home</span>
</a>
I could grab the content from the href attribute and request the page programmatically (don't load it in the browser) to assert that the href is correct and this would be significantly faster.
Is there any chance that an element could have an href attribute that points to the page as expected, but for whatever reason clicking on this element could be broken?
This might be the solution that you are looking for:
Link to Page
That code would append the href attribute as text to the body every time a link was clicked but not actually go to that link. The return false; part of that code prevents the browser from performing the default action for that link. That exact thing could be written like this:
$("a").click(function(e) {
$("body").append($(this).attr("href"));
e.preventDefault();
}
By taking the href content, you might risk that your automation passes test even though the navbar link does not work. It could be that navbar link was disabled by mistake, but as the link is still present in the DOM your automation will not capture it.
Just my 10 cents...
Related
I have a component menu which contains a few anchor tags. Each tag brings the user to that respective page section. I am trying to share the same anchor tag among the other components.
For example, I have two more HTML components called homepage.component.html and details.component.html. For each I call the menu.component.html by its selector. Both homepage and details html components have an id for the section I wanna scroll to. Here's how it looks like:
menu.component.html
Go to content
for both homepage.component.html and details.component.html
<div class="home-content" id="content"> Here comes more code </div>
It should work just like in a non-dynamic html project, however, when the anchor tag is clicked, the url redirects to '' (which is the first/default page) and then it shows the content for the first page, instead of the current componenet I am on.
I have tried creating a function where I get the current url and using the router.navigate, I pass the parameters indicating the fragment:
menu.component.ts
currentRoute: string
scrollToItem(){
this.currentRoute = this.router.url
this.router.navigate([this.currentRoute], {fragment: 'content'})
}
menu.component.html
<a (click)="scrollToItem()">Go to content</a>
However, this function adds the id #content to the url each time the anchor tag is clicked, redirecting the user to my 404 page.
I wanted to know if there is a way to use an anchor tag on the menu.componenet.html, while all the items that have "content" as their ids in different components are going to be displayed. Hopefully I made my question clear. If there is still questions about how the error occurs I can create and shate a stackblitz project. Thanks in advance :)
I am sort of a beginner at this, but my objective is to have the header of my webpage changing, depending on what button was clicked on another page.
More precisely, I have a webpage with 7 buttons on it coded like this:
<form action="contribution.html">
<input type="submit" style="margin-right: 80px;margin-top: 25px;" value="I contribute">
</form>
All of the buttons lead to the same "contribution.html" page, but I would like the header of that page to be different depending on what button the user clicked. There must be a way to do this without creating 7 different "contribution.html" pages for each button... I assume.
Can anyone help, please?
When you do form submission server receives HTTP post request that contains button clicked. Having that request server side can generate proper content of <title> element. Browser will render that text in <title> as a caption of tab/page.
Thus you will need something like PHP or the like on your server. In this case you can have single contribution.php file (but not static html).
Using javascript is the easiest solution. If you spend a little time learning jQuery, you could use something like this:
// A reference to your "header" element
var header = $('.header');
// When the submit button is clicked
$('[type=submit]').click(function(){
// Update the header with the button's text
header.text( $(this).value() );
});
Though I'd recommend using a more specific selector for the buttons you want this to work for, [type-submit] is too generic but I used it because you did.
Use a server-side language and <a> tags instead of a form.
In PHP it will look something like this:
10$
20$
30$
etc.
Then on contribution.php you can get the request data from $_GET['sum'] and act accordingly.
Depending on your application and if you want to be SEO Friendly you should look into this answer How to dynamically change a web page's title?
I have a link which opens a table on the same page if user clicks on the link. What I want to know is that is there another way to link on the same page rather than doing this:
[Open Grid]
This is because in the url it displays # at the end of the url so I want to know is there another way to link on the same page than href="#".
Thanks
Why even use an <a> tag if you are just binding an event handler to the element. Just use a <span> and style it. You can even give it cursor:pointer if you want that link feel/look
just return false in javascript and the link will not be followed when clicked, but you can still open your tables using js, as i suspect you do right now
as I understand you alread have some function binded to the click event of this link, right? if so you can just use href="javascript:void(0)", this way is much better, because in this case browser doesn't add a context menu items such as "Open link in new tab" or "Copy link address" to this link.
If you're using Javascript to detect when an element is clicked, you don't have to use tha anchor tag, or the href attribute.
You could do <a id="showGrid">Open Grid</a> and then something like $('a#showGrid').click(...); if using jQuery. To get the "link cursor" you can do a {cursor: pointer} in CSS. It'll look the same, but you won't get that # in the browser's address bar.
when you click on a link that goes to same page where the link is, how to keep the view of the page?
By default it goes to the top of the same page.
Regards
Javier
One way to do it is to add # at the end of the href attribute on the links pointing to the current page, either manually or via javascript. I don't think it's a nice way to do it, though...
If you really need this, you could also "disable" the navigation for links pointing to the current page, so that clicking on a link to the current page would have no action...
Something like that should work in jQuery :
$('a.current').click(function(event){
//cancel default click action
event.preventDefault();
}
assuming that the links pointing to the current page have the CSS class current
Can you be more specific? What do you mean with "view of the page"?
Here is a general description of anchors:
If you have a link Link then you need an element on the same page with id="someTarget". When you then click on the link, that element will be scrolled to the top of the element.
EDIT:
Ahm, you are talking about a JavaScript link. In that case you need to have the Javascript retur false so that the default action (namely following the link) is ignored:
<a href="#" ... onClick="myJqueryFunction(); return false;">
I have an array of 2000 items, that I need to display in html - each of the items is placed into a div. Now each of the items can have 6 links to click on for further action. Here is how a single item currently looks:
<div class='b'>
<div class='r'>
<span id='l1' onclick='doSomething(itemId, linkId);'>1</span>
<span id='l2' onclick='doSomething(itemId, linkId);'>2</span>
<span id='l3' onclick='doSomething(itemId, linkId);'>3</span>
<span id='l4' onclick='doSomething(itemId, linkId);'>4</span>
<span id='l5' onclick='doSomething(itemId, linkId);'>5</span>
<span id='l6' onclick='doSomething(itemId, linkId);'>6</span>
</div>
<div class='c'>
some item text
</div>
</div>
Now the problem is with the performance. I am using innerHTML to set the items into a master div on the page. The more html my "single item" contains the longer the DOM takes to add it. I am now trying to reduce the HTML to make it small as possible. Is there a way to render the span's differently without me having to use a single span for each of them? Maybe using jQuery?
First thing you should be doing is attaching the onclick event to the DIV via jQuery or some other framework and let it bubble down so that you can use doSomething to cover all cases and depending on which element you clicked on, you could extract the item ID and link ID. Also do the spans really need IDs? I don't know based on your sample code. Also, maybe instead of loading the link and item IDs on page load, get them via AJAX on a as you need them basis.
My two cents while eating salad for lunch,
nickyt
Update off the top of my head for vikasde . Syntax of this might not be entirely correct. I'm on lunch break.
$(".b").bind( // the class of your div, use an ID , e.g. #someID if you have more than one element with class b
"click",
function(e) { // e is the event object
// do something with $(e.target), like check if it's one of your links and then do something with it.
}
);
If you set the InnerHtml property of a node, the DOM has to interpret your HTML text and convert it into nodes. Essentially, you're running a language interpreter here. More text, more processing time. I suspect (but am not sure) that it would be faster to create actual DOM element nodes, with all requisite nesting of contents, and hook those to the containing node. Your "InnerHTML" solution is doing the same thing under the covers but also the additional work of making sense of your text.
I also second the suggestion of someone else who said it might be more economical to build all this content on the server rather than in the client via JS.
Finally, I think you can eliminate much of the content of your spans. You don't need an ID, you don't need arguments in your onclick(). Call a JS function which will figure out which node it's called from, go up one node to find the containing div and perhaps loop down the contained nodes and/or look at the text to figure out which item within a div it should be responding to. You can make the onclick handler do a whole lot of work - this work only gets done once, at mouse click time, and will not be multiplied by 2000x something. It will not take a perceptible amount of user time.
John Resig wrote a blog on documentDragments http://ejohn.org/blog/dom-documentfragments/
My suggestion is to create a documentDragment for each row and append that to the DOM as you create it. A timeout wrapping each appendChild may help if there is any hanging from the browser
function addRow(row) {
var fragment = document.createDocumentFragment();
var div = document.createElement('div');
div.addAttribute('class', 'b');
fragment.appendChild(div);
div.innerHtml = "<div>what ever you want in each row</div>";
// setting a timeout of zero will allow the browser to intersperse the action of attaching to the dom with other things so that the delay isn't so noticable
window.setTimeout(function() {
document.body.appendChild(div);
}, 0);
};
hope that helps
One other problem is that there's too much stuff on the page for your browser to handle gracefully. I'm not sure if the page's design permits this, but how about putting those 2000 lines into a DIV with a fixed size and overflow: auto so the user gets a scrollable window in the page?
It's not what I'd prefer as a user, but if it fixes the cursor weirdness it might be an acceptable workaround.
Yet Another Solution
...to the "too much stuff on the page" problem:
(please let me know when you get sick and tired of these suggestions!)
If you have the option of using an embedded object, say a Java Applet (my personal preference but most people won't touch it) or JavaFX or Flash or Silverlight or...
then you could display all that funky data in that technology, embedded into your browser page. The contents of the page wouldn't be any of the browser's business and hence it wouldn't choke up on you.
Apart from the load time for Java or whatever, this could be transparent and invisible to the user, i.e. it's (almost) possible to do this so the text appears to be displayed on the page just as if it were directly in the HTML.