Is there a way to reload the actual tested page I'm visiting in TestCafe and not the site that TestCafe is running under. I've tried using:
await t.eval(() => location.reload(true));
but that just reloads the server page that TestCafe uses. So for example, if I test www.google.com, the URL in the browser after I launch TestCafe will be something like http://172.16.0.152:58486/Qf6eMxOvA/https:/www.google.com/
That is the site that reloads when I execute the code above. Is there a way to force just reloading www.google.com to actually simulate reloading the tested page?
await t.eval(() => location.reload(true));
You are right, you should use the code provided above to reload your test page.
Please check out the following example. The example works as expected: we check the local storage value after the page reload.
test.js:
import { ClientFunction } from 'testcafe';
fixture `fixture`
.page `http://devexpress.github.io/testcafe/example`;
const getLocalStorageItem = ClientFunction(key => localStorage.getItem(key));
test('local storage', async t => {
await t.eval(() => localStorage.setItem('key', 'value'));
await t.expect(getLocalStorageItem('key')).eql('value');
await t.wait(2000);
await t.eval(() => location.reload(true));
await t.wait(2000);
await t.expect(getLocalStorageItem('key')).eql('value');
});
Result:
Running tests in:
- Chrome 74.0.3729 / Windows 10.0.0
fixture
√ local storage
1 passed (9s)
Do try to avoid eval and wait in general. Make use of Testcafe's ClientFunction instead. I use something like this in my base page object:
async refresh () {
await ClientFunction(() => {
document.location.reload();
})();
}
then in your test, call it with something like myPage.refresh()
Related
I do have a super weird error coming up only when deploying the code to Vercel. It doesn't happen locally which makes it quite annoying to begin with.
I do have a staging and a production instance for my code. I want to protect the staging with a password which is not difficult since I implemented the authentication via Firebase. The only tricky part is that I don't use Firebase to keep track of the user but my server (basically setting a cookie). I should mention that I am using Sveltekit to put it all together.
In sveltekit you can use hooks, which can be seen as middlewares, to redirect a user to the sign-in page if the env variable for the environment is set to dev.
Another hook redirects a logged-in user, so if you are already logged in and try to go to auth/sign-in or auth/sign-up you'll get redirected to the home page.
Now the weird happens: I go on the deployed version of the site, and I get immediately redirected to the sign-in page, which is correct. I try to navigate to all the pages of the website, the redirect still works fine. I log in and upon success, I should be redirected to the homepage, which I do BUT the home page redirects me to the sign-in page as if I wasn't logged in and again the sign-in page redirects me to the home page as if I was, thus creating a loop.
I honestly don't know why this happens since it perfectly works locally, so my thoughts go to Vercel. I would exclude Firebase since I remembered to put the custom domain as an allowed domain in the settings.
To give a bitmore context, I structured the hooks responsible for the redirect in this way:
export const authSessionHandler: Handle = async ({ event, resolve }) => {
const cookie = event.locals.cookie;
const idToken = await getIdTokenFromSessionCookie(getCookieValue(cookie, 'session'));
const user = idToken
? {
uid: idToken?.sub,
email: idToken?.email
}
: null;
event.locals.idToken = idToken;
event.locals.user = user;
return resolve(event);
};
export const redirectLoggedInUserHandler: Handle = async ({ event, resolve }) => {
const { user } = event.locals;
const next = event.url.searchParams.get('next') || '/';
if (
user &&
(event.url.pathname.startsWith('/auth/sign-in') ||
event.url.pathname.startsWith('/auth/sign-up'))
) {
return new Response('Redirect', {
status: http_302.status,
headers: {
location: `${next}`
}
});
}
return resolve(event);
};
export const redirectToSignInForDevEnvironmentHandler: Handle = async ({ event, resolve }) => {
const { user } = event.locals;
const allowedEndpoints = ['/auth/sign-in', '/auth/session'];
if (!user && env === 'dev' && !allowedEndpoints.includes(event.url.pathname)) {
return new Response('Redirect', {
status: http_302.status,
headers: {
location: '/auth/sign-in'
}
});
}
return resolve(event);
};
The handlers are in that order, so the first one populates the user and the rest can check the rest.
In the code I am getting the user from event.locals which kind of decides the entire logic (as it should) and to me it's quite interesting and telling the fact that the sign-in page redirects me to home which mean the user is defined, but the home page redirects back as if the user was not defined. This made me think it is not a problem with the code but probably the provider(s) Vercel or Firebase.
It would be very helpful to know your thoughts about it.
Nuxt 3 has those amazing data fetching functions (ex.: useFetch), but I come out on a situation that I need to make request after the rendering time (ex.: calling from a button and send a search term).
As I far know, useFetch are not working on client-side, here is what I have trying to do
<template>
<button #click="goSearch()">Search</button>
</template>
setup() {
const goSearch = async () => {
const { data } = await useFetch('search', () => $fetch('/api/search'));
console.log(data.value);
};
return { goSearch };
},
}
Does nuxt3 offers a built in function to make http request on demand (client-side official http axios like)?
$fetch should work. The problem were a small bug that is now fixed. If you are experiencing this bug, just upgrade nuxt/ohmyfetch lib
npx nuxi upgrade --force
More here:
https://github.com/nuxt/framework/issues/2502#issuecomment-999783226
useFetch is the same as using $fetch, here why not simply use fetch already in your code ?
const { data } = await $fetch('/api/search' );
i think you code is simply no just youcan use useFetch even on client side but like that :
const { data } = await useFetch('/api/search')
this is my code to reject a profile to delete them
how can I reload the page automatically after deleting it?
const canceller = (item) => {
firebase.firestore()
.collection("ServiceProvider")
.doc(item)
.delete()
.then(()=>{
alert(`you have deleted the profile successfully `);
You can call a state variable in your .then() method to cause your page to reload.
You can also use firebase's onSnapshot() methods, but this depends on how/if you're rending data from your ServiceProvider collection.
I'm using the following code in one of my pages:
export async function getServerSideProps(context) {
const session = await getSession(context)
return {
props: { session }
}
}
and the session is returning null. I get the following error:
[next-auth][error][client_fetch_error] [
'http://localhost:3000/api/auth/session',
FetchError: request to http://localhost:3000/api/auth/session failed, reason: read ECONNRESET
if I try to navigate to http://localhost:3000/api/auth/session in my browser I get the session object normally. Also, my co-worker has the same code in his machine and it is working fine for him.
The only difference that I know between my environment and his is that I'm using windows and he is using mac. Not really sure if this can be causing the problem here.
This problem is happening due to not specifying e.preventDefault() on login button.
The working code should look like this :-
async function login(e) {
e.preventDefault(); //Add this to your code.
const getLoginStatus = await signIn("credentials", {
redirect: false,
username,
password,
})
};
Try to delete .next folder in your root directory and try again
I had the same issue and solved it by using straight ip address/domain name.
Try to use 127.0.0.1 instead of localhost, e.g.: NEXTAUTH_URL=http://127.0.0.1:3000
I'm able to authorize the Firebase app from my existing Electron app using firebase.auth().signInWithCustomToken. The promise for this method resolves and I'm able to obtain the current authorized user with firebase.auth().currentUser.uid.
At this point I must technically be able to write to /users/<currentUser>. However calling the userRef.set() and userRef.update() methods does not update the database reference and fails silently (both the callback and the promise from these methods do not resolve and there is no error thrown).
What is strange is that the exact same code works in a different, newly created Electron app. My code looks like below:
const writeToFirebase = (customToken) => {
syncApp.auth().signInWithCustomToken(customToken).then(user => {
const userId = firebase.auth().currentUser.uid; // this is successfull
const userRef = firebase.database().ref("/users/" + userId);
userRef.set({data: data}, () => { //callback does not trigger });
userRef.update({data: data})
.then(() => {//promise does not resolve})
.catch(err) => {// promise is not rejected either! }
});
}
Any pointers on how to go about debugging this would be helpful.
I discovered the problem. It's unlikely anybody else would have the same issue, but if you do, take a look at the userAgent value in your browserWindow.loadURL in Electron.
Mine was set to an Android mobile device & Firebase was not setting/updating due to this reason. I presume the Firebase server reacts differently when it sees a mobile userAgent and I was using the Firebase JS SDK and not the Android SDK which caused the issue.