Intercepting a HTTP request in the middle of a test in Testcafe - testing

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);

Related

How to capture/intercept network api calls (Request and Response) with webdriverio framework?

I am trying to capture all the api's called on clicking submit action using **wdio-intercept-service ** npm library with method browser.getRequests({includePending: true }) in WebDriverIo framework.
Total 3 api's gets called on clicking submit button: beacon, getPNR, fulfilPNR.
Right now when I click on Submit, it returns only 1 beacon api which gets called on every UI action. The other 2 apis are not captured.
Can't we capture other user defined api's with this service?
I am using Wdio-intercept-service version : 4.3.1.

How do I use AbortController when the user clicks a button and then navigates away?

I'm fairly new to AbortController and so far I've only used it in useEffect callbacks. However, I have a screen in my React Native app which allows the user to click a button to open a dialog; in the background the button click causes an axios call to the api, and then the retrieved information is shown in the dialog.
But what happens if the user clicks the button and then quickly navigates away? In this case, the information doesn't need to be retrieved, and it can't be displayed once it's been retrieved anyway.
Is there a way to handle this? ie can I set up an AbortController and then if the user navigates away from the screen, abort the signal so that the api call gets cancelled?
I don't know If I understand you correctly, but you can use useEffect cleanup function to cancel axios request. About cleanup function: https://dev.to/otamnitram/react-useeffect-cleanup-how-and-when-to-use-it-2hbm.
If you want you can prevent user to go back, until axios fetching is done-> https://reactnavigation.org/docs/preventing-going-back/

Wait for a Redux action to return a value from API and based on the response need to navigate to Screen

I am developing a simple signUp screen using react native. If the user enter all data (first name, last name, email) in the form, the entered data will get passed to the API and saved it to DB.I have a simple validation here ..i.e.. Once user submits I am dispatching the action to call API and the API will return true if the user entered email is already existing.
Based on the return result from the API, I need to proceed further.
if true (email already existing) I need to show some error message.
if false(email not existing) I need to navigate to next screen.
My Problem is while dispatching action it is not waiting for return value.
Below I have mention my code,
once submitted calling the js function to dispatch action,
My redux action
My log

nightwatch listen for custom event

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.

Handling the google interactive post onclick via javascript

My scenario is as follows:
Our application is building on top of google-plus and takes advantage of the google-plus connections.
Is this supported with Interactive posts? I want to:
Block showing the interactive post dialog on the button click if a certain condition is not met
Perform a certain action once the button to show the dialog is clicked - onClick works for this but I could not find documentation on it.
var options = {
contenturl: url,
clientid: googleappid,
cookiepolicy: "single_host_origin",
prefilltext: text,
calltoactionlabel: "START",
calltoactionurl: ctaurl,
recipients: connectionid,
onClick: specialFunctionToRunOnClick(params)
};
gapi.interactivepost.render('submitInvitationongoogle', options);
Is there something like beforeSend that can prevent the click from firing?
There currently is not an API for testing whether the user has created an interactive post on their stream. You can know when the interactive post was rendered to the user by logging the API calls for gapi.interactivepost.render and can use the call-to-action url for testing when the recipient clicked the button. You can also look at their public stream activity to test whether the post was shared publicly but this is probably not what you want.