I am very new to TestCafe, (but excited by what I see) so this might be a dumb mistake.
All the examples of TestCafe that I have found, depend on a single URL.
However, I want to test a very familiar sequence:
user makes some choices in page X and clicks submit,
user is shown multiple matching records in page Y, and clicks something in one result,
user sees a detail page Z, with full information for one record
When I try this in TestCafe, my test terminates when control leaves X. It never sees Y.
So, in the last lines of my test, after it submits page X
await t
.click(submitButton);
.. if I look for values which should be in page Y,
await t
.expect(Selector('#back-to-home-page').innerText)
.contains ('Back to Page X');
the Selector cannot find them. It only finds things still in page X.
(I have testcafe v 6.14, but this is not version-specific).
Thank you.
I'm not sure if I understand your question precisely, is page Y a different page that opens? (eg. you click on submit and page Y opens in a new tab / window)
See this for that: https://devexpress.github.io/testcafe/documentation/guides/advanced-guides/multiple-browser-windows.html
Also, judging by the last sample you provided, it might be the case that the element doesn't load fast enough?
Try something like:
await t
.expect(Selector('#back-to-home-page').innerText).contains('Back to Page X', {timeout: 20000})
See if the element is actually there before testcafe expects it.
Thank you for that idea Liviu.
My case is only in a single window, not multiple windows or tabs. Page X and Y are different URLS on the same domain: a form then a search results page. A completely typical flow.
I tried your good suggestion, but it did not work and now I know why.
For reasons unknown so far, the Page X submit button remains disabled even after TestCafe completes the required inputs. It is visible but greyed out. With human entry, this does not happen, only with TestCafe data entry. Some piece of JQuery validation is not getting triggered.
As newbie, before this, I did not know for sure if Testcafe could follow from page X to Page Y in any case, which would be an awful limitation. But I now have proved to myself that works, when I use TestCafe on other sites.
I can't solve the JQuery on my test site, and it is too detailed to post here. But I am happy to close the question.
Thank you guys.
Related
I've been trying to figure this out using various different methods. I'm trying to create a script/bookmark or some type of quick action to open a browser tab or window with a specific URL, and automatically log me in using my credentials. I'm not all that concerned about security for this at the moment.
At first I figured I'd try to use a javascript bookmark to do this, but nothing I found in my research worked. Next I tried to create a bash script, but I couldn't figure out how to send the credentials in via the terminal. Most recently, I literally copied the source code of a site, created a local file and tried to hack together something where I could prefill the form data with credentials and use JS to submit the form, and I've gotten close with this, but for some reason when I use the JS submit function, it errors out and says that the username and password are invalid. But when i turn off the submit function and manually click "log in" on my local html page, it works as expected. I want this to be a one click process, so the idea of using onload/submit or something to that affect is really important to me.
The site I'm testing with has a Rails backend and my next attempt might be trying to use POST to do what I'm thinking, but that's currently outside of my level of knowledge on the subject.
Anyone answering: i do not want to use a password manager to accomplish this.
My requirement is that i will either be able to a) run a script or b) use a 1-click option to do this per website. Ideally i'd be able to set this up in a sort of programmatic way to do this with multiple sites, but I'd be happy with 1 at the moment.
i know similar questions have been answered before, but I haven't been able to use information from those posts (the ones I've seen anyway) to figure out a good way to do this.
Create a bookmark for the current page you have opened.
Edit the bookmark
Change the value for the URL to something like this.
(javascript:(function(){CODE_GOES_HERE_FROM_BELLOW})();
find the field for username and password on the page.
Given example for hotmail
var inputs = document.getElementsByTagName('input'); for(var i=0;i<inputs.length;i++){if(inputs[i].name === 'passwd'){inputs[i].value = 'YOUR_PASSWORD'}else if(inputs[i].name === 'loginfmt'){inputs[i].value = 'YOUR_USERNAME'}}; document.getElementById(document.getElementsByTagName('form')[0].id).submit();
OR
try out casperjs.
The proposed solution didn't work for me and rather than spending tons of time installing a testing framework that I'll never use other than for this purpose, I decided to try to do this another way.
First, I found out that the reason my JS wasn't working before is because the site did not allow a JS submit to be done, or atleast that's what it seemed to be when I got this error: "Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience"
The javascript I was using was in fact working, just not submitting. I used the following code to fill the fields (using "Class Name" elements on the page since there was no name or ID):
document.getElementsByClassName('username')[0].setAttribute('value', 'user');
document.getElementsByClassName('password')[0].setAttribute('value', 'password');
As I mentioned, the problem was when I tried to use JQuery to submit the form: document.getElementsByClassName('loginForm')[0].submit();
Which is when the above error cropped up. I can't really say for sure whether this is the root of the cause, but the page does submit, but I get an invalid username/password error when I do
I haven't figured out a great way to get around this just yet, but my short-term, "hacky" solution was to use Applescript to send a return keystroke to the browser to submit the form. I'd ideally like to figure out how to get the submission to work using JQuery, but I'm not sure how to get around it.
Let us say my test wants to see if a user can see an image on XYZ page. And let's say in normal usage, the user can only go to XYZ page by clicking a link on ABC page (might be the home page).
Now assuming the URL to XYZ page is not static, but maybe depends on the image, and can be generated in the code simply, I have two ways of writing the test:
Generate the URL in test and directly navigate to XYZ, and then check if the image is present.
Go to ABC like a normal user would, click on the link which takes you to XYZ and then check for image
For option 1, I feel like I get more test isolation. If the link on ABC page is not generated correctly or is broken for some other reason, this particular test should not fail, right? That should be the responsibility of some other test?
But for option 2, that is how a real user would do it. He would almost never try to guess the pattern of the URL and then navigate to it directly. And I cannot have a huge test that goes to every link and sees if it is not broken, that would be way too complicated. So this much sacrifice in test isolation is needed.
How should I decide between the two options? Is there a right way? Hopefully the question is not too subjective for stackoverflow.
It depends on what you're wanting to test. If you want to test the buttons or links themselves (ie: you're testing the whole user workflow), click on them just like the user would.
If, on the other hand, clicking these links is just a means to an end and that the real target of the test case is deeper into the app, I think it's perfectly fine to skip directly to the part of the app you're actually testing.
As an End User, best approach will be the Option 2 which also widen the coverage of your test hence you can check:
1. Whether links/ buttons are clickable and not throwing exception.
2. Click on above is navigating to correct page.
Option 1, can be used for test scenario where user doesn't bother about how to reach to the page rather focused only on the opened page contents.
Choosing any of these option is depending on your approach of test coverage and its scope.
I am testing my web application using Selenium. All the form validation in the web application is done by HTML5 and some JS(for safari browser). I want to know what is the proper way to test the form validation.
Currently I am using one approach, i.e Before I filled up a mandatory field I clicked on the submit button. If the page is not refreshed then I assume the form validation working correctly. But I think there should be a better approach to do it. I am unable to find any proper solution. Any suggestion will be highly appreciated.
I also go through this link. But it is not working for me because it is not enough to have required attribute (eg required attribute does not work in older Safari browser).
Rather than checking if the page is refreshed or not, you should instead expect that it is not and that a certain error message or field highlighting or something is applied to the current page. When in an error state, the input fields probably get given an extra class, or an error div/span might be added to the DOM, try checking for that sort of thing
I start learning to write Cucumber test, and now I can write the test, but my test is too silly; I don't know I should focus what and ignore what. I always ask my co.op how to write a good test with Cucumber, and they give me some advices, but I feel not satisfy enough. So, please tell me about your opinion and give me some examples, thanks so much!
EDIT
I had an index page with a table, and 3 buttons(edit, detail, delete) in the last column each row of the table
and 1 button Create below the table, and the nav bar has a login form
So what thing I should check?
In my opinion, I think we shouldn't check login function and the content of the nav bar, because every page in this controller has the same layout
Maybe we should check total columns, total rows, the title, the icon css, the content of button, the css of whole page (border of table, width, height, font-family) ... Is this true?
I think you should prioritise the elements in your page, and check them.
As an example, when you test the login page:
Important elements of the login page
user name, password text boxes
login button
Not important elements (This all depends on your business requirement)
cancel button
other fancy text
etc..
and then in your Cucumber test, make sure you check the availability of user name, password text boxes and login button. The rest of the elements you can ignore. Otherwise you will be spending unnecessary time on testing non-important things.
Again, the priorities of your given page is depending on the business requirements of your project.
I'm not even sure what the name of that is to be able to make a search... but I would like to make those kind of things. Facebook has that too with the messages, notifications and friends requests. Thanks
I'm not sure if you expect anyone to give you a complete tutorial with source code included? :) You should probably do some digging around yourself, since a concrete answer on this could mean to write a few pages :)
How can you dig around?
Thé tool for a job like that is Firebug (IMO).
With bigger tasks like these it makes sense to try to split it up in smaller pieces.
Let's say you go for a widget like the user profile popup on SO.
you need some HTML to display in a popup: right click on any html element on the popup and click the 'inspect element' menu item. This brings you to the HTML tab in firebug. This allows you to figure out how the HTML is structured
you need some CSS to style that popup: when you're browsing the html structure, you might already have noticed that on the right side of it is the CSS that is applied to the active element
you might want to use some animation effects: for that you could use jquery. Have a look here to find out more on which effects are available and how they can be triggered. Fading is used in the profile popup on SO.
then you might ask yourself the question where SO get's that html structure from, right? To find out more about which server calls are made you can use the 'NET' tab in Firebug. (When you hover over your user name (only the first time?), then you should notice there's a call made to something like: http://stackoverflow.com/users/profile-link-stats?_=someLongNumberHere
In firebug you can then inspect the request and response. You should notice that the response is some HTML structure. This HTML structure is then inserted into the DOM.
Sooooo you can kinda glue it all together now:
the user hovers over his user name
the hovering triggers a server call (see step 4): use jquery hover to attach a handler to the user link. (subsequent hovers don't trigger that server call, so there needs to be a check to see if that profile popup was already loaded or not)
when the server call successfully returns (see jquery get), the returned html is inserted into the DOM and a fadeIn effect is triggered.
it seems a mouseout is used to fadeOut the popup
I HOPE this is the answer you were looking for. It took me a while ;)
You probably need to check out stackapps