I'm having trouble making the selection of the element that conditionally appears on a page.
I've tried awaiting but it didn't work.
// Gets imported as detailedProductPage
export default class Page {
constructor () {
this.chipItem0 = Selector('[data-test-id="chipItem0"]').child('.tag-name').child('[data-test-id="tagValue"]');
}
}
test('should accept value and allow for making the selection of multiple items.', async t => {
const string0 = 'Professionelle Nassreinigung nicht erlaubt';
const string1 = 'Handwäsche';
const string2 = 'Waschen 30°C';
await t
.click(detailedProductPage.listContainerFirstChild)
.typeText(detailedProductPage.symbols, string0)
.click(detailedProductPage.symbolsResultsItem0)
.expect(string0).eql(detailedProductPage.chipItem0.innerText)
.typeText(detailedProductPage.symbols, string1)
.click(detailedProductPage.symbolsResultsItem0)
.expect(string1).eql(detailedProductPage.chipItem1.innerText)
.typeText(detailedProductPage.symbols, string2)
.click(detailedProductPage.symbolsResultsItem1)
.expect(string2).eql(detailedProductPage.chipItem2.innerText);
});
You can use the exists property to check if the element exists on the page. With this you can click on the element that conditionally appears on a page:
const el = Selector('#el');
if(await el.exists)
await t.click(el);
To make your test correct, you need to fix your assertions. According to the TestCafe Assertions API the eql assertion should be used in the following manner:
await t.expect( actual ).eql( expected, message, options );
TestCafe allows a user to pass asynchronous Selector properties as an actual argument. These properties represent a state of a related DOM-element on the tested page. In your case, the actual value is detailedProductPage.chipItem0.innerText.
The expected value can't be an asynchronous property, it should be a calculated value (like string, boolean, number or some object etc..).
The following code should work correctly:
await t
.click(detailedProductPage.listContainerFirstChild)
.typeText(detailedProductPage.symbols, string0)
.click(detailedProductPage.symbolsResultsItem0)
.expect(detailedProductPage.chipItem0.innerText).eql(string0);
Related
Here is a reproducable stackblitz -
https://stackblitz.com/edit/nuxt-starter-jlzzah?file=components/users.vue
What's wrong? -
My code fetches 15 items, and with the bottom scroll event it should fetch another 15 different items but it just fetches same items again.
I've followed this bottom video for this implementation, it's okay in the video but not okay in my stackblitz code:
https://www.youtube.com/watch?v=WRnoQdIU-uE&t=3s&ab_channel=JohnKomarnicki
The only difference with this video is that he's using axios while i use useFetch of nuxt 3.
It's not really a cache issue. useFetch is "freezing" the API URL, the changes you make to the string directly will not be reliably reflected. If you want to add parameters to your API URL, use the query option of useFetch. This option is reactive, so you can use refs and the query will update with the refs. Alternatively, you can use the provided refresh() method
const limit = ref(10)
const skip = ref(20)
const { data: users, refresh: refreshUsers } = await useFetch(
'https://dummyjson.com/users',
{
query:{
limit,
skip
}
}
);
//use the data object directly to access the result
console.log(users.value)
//if you want to update users with different params later, simply change the ref and the query will update
limit.value = 23
//use refresh to manually refresh the query
refreshUsers()
This results in a first API call http://127.0.0.1:8000/api/tasks?limit=10&skip=20 and then a second with the updated values http://127.0.0.1:8000/api/tasks?limit=23&skip=20
You can leave the cache alone, as it is just a workaround, and will not work reliably.
[Updated] The useFetch() documentation is now updated as described below.
The query option is not well documented yet, as discussed in this nuxt issue. I've created a pull request on nuxt/framework to have it reflected in the documentation. Please see a full explanation below:
Using the query option, you can add search parameters to your query. This option is extended from unjs/ohmyfetch and is using ufo to create the URL. Objects are automatically stringified.
const param1 = ref('value1')
const { data, pending, error, refresh } = await useFetch('https://api.nuxtjs.dev/mountains',{
query: { param1, param2: 'value2' }
})
This results in https://api.nuxtjs.dev/mountains?param1=value1¶m2=value2
Nuxt3's useFetch uses caching by default. Use initialCache: false option to disable it:
const getUsers = async (limit, skip) => {
const { data: users } = await useFetch(
`https://dummyjson.com/users?limit=${limit}&skip=${skip}`,
{
initialCache: false,
}
);
//returning fetched value
return users.value.users;
};
But you probably should use plain $fetch instead of useFetch in this scenario to avoid caching:
const getUsers = async (limit, skip) => {
const { users } = await $fetch(
`https://dummyjson.com/users?limit=${limit}&skip=${skip}`
);
//returning fetched value
return users;
};
I want to get the whole link address, but with the hoverProvider, I can only get the part of hoverd range.
here is the activate code and the result
export function activate(context: vscode.ExtensionContext) {
// Use the console to output diagnostic information (console.log) and errors (console.error)
// This line of code will only be executed once when your extension is activated
const disposal = vscode.languages.registerHoverProvider("javascript", {
provideHover(document, position, token) {
const range = document.getWordRangeAtPosition(position);
const word = document.getText(range);
return new vscode.Hover(
word
);
},
});
context.subscriptions.push(disposal);
}
so how to get the whole link 'https://www.youtube.com'?
According to the documentation, the getWordRangeAtPosition method allows you to define a custom word definition with a regular expression. A good regular expression to match a URL can be found in this answer.
Thus, in your case, you'd simply have to add a regular expression to the getWordRangeAtPosition method:
provideHover(document, position, token) {
const URLregex = /(https?:\/\/)*[-a-zA-Z0-9#:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()#:%_\+.~#?&//=]*)?/gi;
const range = document.getWordRangeAtPosition(position, URLregex);
const word = document.getText(range);
return new vscode.Hover(word);
}
Let's say I have this in a test:
await t.expect(Selector('input')).ok()
And I would like to have (something like) this:
let func = 'ok';
await t.expect(Selector('input'))[func]()
This is so that I can have a map from selector to function, in order to iterate
over it and check whether some elements are in the page (ok) and some not (notOk).
My above attempt does not work and returns with an interesting error:
code: 'E1035',
data: [
'SyntaxError: test.js: await is a reserved word (325:14)'
]
I believe this is because Testcafe is doing some magic under the hood.
What would be the correct syntax to make it work?
It seems that you skipped the Selector property that you want to check (e.g. exists, visible, textContent, etc.). The following test example works properly with TestCafe v1.14.2:
import { Selector } from 'testcafe';
fixture`A set of examples that illustrate how to use TestCafe API`
.page`http://devexpress.github.io/testcafe/example/`;
const developerName = Selector('#developer-name');
const submitButton = Selector('#submit-button');
test('New Test', async t => {
await t
.typeText(developerName, 'Peter Parker')
.click(submitButton);
let assertFunc = 'ok';
await t.expect(Selector('#article-header').exists)[assertFunc]();
});
I have a method in my Vue instance that do the following:
submitForm(confirmation) {
//set price confirmation
this.price_confirmation = confirmation
//proceed
var form = this.getForm()
}
Price confirmation is the v-model of an input.
Then the method getForm serialize (with jquery) the form. The thing is that my form is being serialized before this.price_confirmation = confirmation is run.
How can I run this.getForm() after Vue assign the data?
You probably need to use the nextTick method to wait until the next update cycle:
submitForm(confirmation) {
//set price confirmation
this.price_confirmation = confirmation
//proceed
this.$nextTick(() => {
var form = this.getForm();
});
}
From what you've shared, it's not clear how the confirmation is set in your component and at what point the submitForm is called. submitForm method seems to be correct, and should work correctly (i.e. this.getForm() is called after this.price_confirmation is set). What you could do is, look where the confirmation variable is set and add an async function to it. e.g:
async confirmation() {
await getConfirmations();
}
If you need more help please share the relevant code from your component.
I have a scenario in which multiple elements of the same className appear one after the other (it depends on a server response).
What I'm trying to achieve is passing the test only after 2 elements of the same selector are present, but currently, it seems like the test fails because it keeps recognizing 1 element and then straight up fails without waiting for a 2nd one.
This is my code (called from the outside with a count argument of, say, 2) -
import { Selector } from 'testcafe';
export const validateMsg = async (t, headlineText, count = 1) => {
const msgHeadline = Selector('.myClassName').withText(headlineText).exists;
const msgHeadLineExists = await t
.expect(msgHeadline.count)
.gte(count, `Received less than ${count} desired messages with headline ${headlineText}`);
return msgHeadLineExists;
};
I assume this happens because I'm checking whether msgHeadline exists, and it sees the first element when it gets rendered, and immediately fails. I'd like to wait for a 2nd one.
Any ideas?
Just remove the .exists from your selector it returns boolean and then calling .count on it will fail the test.
const msgHeadline = Selector('.myClassName').withText(headlineText);
const msgHeadLineExists = await t
.expect(msgHeadline.count)
.gte(count, `Received less than ${count} desired messages with headline ${headlineText}`);
return msgHeadLineExists;
You can read more here
https://devexpress.github.io/testcafe/documentation/test-api/selecting-page-elements/selectors/using-selectors.html#check-if-an-element-exists
If both elements have same text and only this elements have this specific className then you can use nth() function
const msgHeadline = Selector('.myClassName')..withText(headlineText).nth(1);
await t
.expect(msgHeadline.exists).ok(`Received less than ${count} desired messages with headline ${headlineText}`)
Here you take second element with headlineText and then assert, that it exists. Though i think you should check that it exists and displayed(visible)