I'm trying to test for a Javascript CustomEvent in Nightwatch. My website performs a CustomEvent call upon display or click on certain elements (for external analytics tracking). By example: when the page loads, and a banner is displayed, a custom event "banner-displayed" will be fired (custom event is attached to the body element); on clicking the banner, the banner-clicked custom event is fired.
I want to test when I navigate in my test environment (nightwatch-selenium-phantom) to the page, the banner-displayed event is fired, and when I perform a 'click' command on the banner, the banner-clicked event is fired.
Can't figure out how to set up the right script and command logic to get this done... Any help appreciated.
Related
I am writing a functional test using Testcafe. The test scenario is as below,
There is a toggle button that activates/deactivates based on an API call
When I open my application, an API call is made that returns a value ON/OFF; based on that, the toggle switch is activated or deactivated.
I want to intercept that call when the user clicks on that toggle button again.
Long story short:
User logs in
XYZ API is called made, and it gives the response ON
Based on that response, the toggle button is activated
Then user will click on the toggle button
Now the XYZ API should be called again which will return OFF
await t.navigateTo(`${url}`);
await t
.click(myPage.toggleSwitch)
.addRequestHooks(myPage.xyzAPI.respond([{ valueBar: "ON" }
]))
.expect(myPage.toggleSwitch.checked)
.eql(true);
});```
I want to intercept that call when the user clicks on that toggle button again.
You need to add the target request hook before the click action. Also, before the click action, the actions chain should be broken.
await t.navigateTo(`${url}`);
await t.addRequestHooks(<hook that caught the API calls>);
await t
.click(myPage.toggleSwitch)
.expect(myPage.toggleSwitch.checked).eql(true);
I'm trying to load search results into DataTables control. So after the user inputs some parameter and pressing the 'Search' button, then I would like to see the data loaded in the DataTables control. How do I initiate DataTables to load data through ajax only upon a user triggered event? All the examples I have seen all load data immediately. Thanks.
Use iDeferLoading in the initialisation code to prevent the datatable making a request on the initial page render.
'iDeferLoading': 1
Use fnDraw in your button click event to make the request with the user input as a parameter (see fnServerParams for this)
oTable.fnDraw();
In my Durandal app, I have a search page - I'd like to:
Load a clean search page when it's loaded from the menu (router.navigate('#/search'))
When navigating to an item from the search page, then using the back button, this should return to the original search result & criteria.
I'm also storing my search criteria & results as a (app-wide) singleton, which is injected to the view model via RequireJS.
Am I able to: distinguish how the user entered the page? I can see that the activate() lifecycle call is triggered under both entry methods.
If you want to know if the user landed to the search page by clicking a link/button from your app or by visiting by entering a url/back button, what I would do is to raise an event when the user clicks on the link/button and on the search page check if the event has been raised or pass some parameter in router.navigate.
I have been recently doing some work on distinguishing a user click from within the application and a back or forward button from the browser. If you are using router.navigate() to navigate around the Durandal application the router.explicitNavigation flag is set to true. But you would want to capture this before the 'router:navigation:complete' event in 'router:route:activating' event as the flag gets set back to false on 'router:navigation:complete' event.
Bottom line is if you are using router.navigate to navigate around the application the router.explicitNavigation property will be set to true and if navigation is triggered using the back/forward button in the browser router.explicitNavigation will be set to false.
In actual case you might not even need to perform router.navigate() to distinguish between an in app navigation and a browser back/forward because Durandal's router module listens to all 'a' tag click on the document level and sets the explicitNavigation flag to true. However I haven't tested this fully.
Whenever I click the back button calling "history.back(1);"
the $(document).ready(...); is always triggered..
how to prevent it? I jsut want page loaded without doc.ready when back button clicked..
We have a Facebook app here which has three boxes with three buttons. Each button, when clicked, should change state once an event (successfully) happens. The buttons are almost all working (a few minor bugs) but they have been done a rather long-winded and inefficient way.
My question is, what is the most efficient way to link events (i.e. page 'liked', personal information submitted, page 'shared') with the state of the buttons?
You can use jQuery and the .trigger() function to fire off events. Then you can use .bind() to listen to the events and do something. For example, when the user logs in, you can trigger a user_logged_in_event, and bind to it. In the function, you can then use JS to change the login button to logout...