On the page that I am testing, a user can have a single currency or multiple currencies (i.e EUR and USD)the currency/currencies will appear in the same div at the top of the page.
If a user has multiple currencies, a tab for each currency will appear further down the page, if a user has only one currency, no tabs will appear (as there is no need for the user to switch tabs).
I am able to test multi currency users by checking to see if the text contained in the header matches the text contained in the currencies tabs.
However, as no tabs appear for a single currency, I'm not sure how to test this.
For example, if I have only a 'EUR' currency, is there a way to do something like
if element(by.className("currencies"))contains 'EUR'
&& doesn't contain 'USD' && doesn't contain 'GBP'
expect element(by.className("tabs").toDisplay.toBeFalsy()
This is the code for the page object file
this.checkCurrency = function(currency) {
var checkBalance = element(by.className("balances"));
checkBalance.getText().then(function (text) {
if (text.indexOf("GBP" && "EUR")>= 0) {
expect(element.all(by.linkText("GBP")).isDisplayed()).toBeTruthy();
console.log("EUR GBP buyer");
}
else if (text.indexOf("GBP" && "USD")>= 0) {
expect(element.all(by.linkText('USD')).isDisplayed()).toBeTruthy();
console.log("USD GBP buyer");
}
else
{
console.log("false");
}
});
};
From your description I'm not quite sure where the failure is. In general you want to keep this kind of logic out of your page object. Your test should understand what state the page should be in and call different functions. I know that's not always possible, but it works out so much better if you can. Here is some general condition advise that should help.
You can catch the success state and a failed state of a promise. Most people use the pass function, but forget about the fail function.
promise.then(passFunction, failFunction)
You can use this in several different ways. If you realize that almost everything in protractor is returning a promise.
Example:
element(by.className("currencies")).getText()
.then(
function(text) {
//check on something
},function(error){
//don't check on something
if(someCondition) {
throw error;
} else {
//the test continues
}
});
You can even do it with and expect
expect(element(by.className("currencies")).getText()).not.toContain("EUR")
.then(
function(passed) {
//check on something
},function(failed){
//don't check on something
if(someCondition) {
throw failed;
} else {
//the test continues
}
});
Or a simple findElement
element(by.className("currencies"))
.then(
function(element) {
//check on something
},function(error){
//don't check on something
if(someCondition) {
throw failed;
} else {
//the test continues
}
});
Related
As you can see from the code below, I'm checking the contents of manifest.json to get the matches and exclude_matches in my content_scripts option. I think it works as intended, because I'm seeing the action active only in the URLs listed in "matches" property, not in the ones in "exclude_matches". However, this seems to be too error-prone, because I may have to modify the string replacements in regExpFromMatch if I need to update these match patterns in the future. Is this really making the extension inactive or is it just the action in the toolbar? And, in order to avoid the probable need for repetitive refactoring in the future, I'd like to know if there's a simpler, safer, way to achieve this.
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
if (changeInfo.status === "complete") {
const {
content_scripts: [{ matches, exclude_matches }],
} = chrome.runtime.getManifest();
const actionEnabled = isActionEnabledInThisURL(
[matches, exclude_matches],
tab.url
);
if (actionEnabled) {
chrome.action.enable(tabId);
} else {
chrome.action.disable(tabId);
}
// *************************************************************
function isActionEnabledInThisURL(contentMatchPatterns, url) {
const [isMatch, isExcludedMatch] = contentMatchPatterns.map(
(urlMatchPattern) =>
regExpFromMatch(urlMatchPattern).some((regExp) => regExp.test(url))
);
return isMatch && !isExcludedMatch;
}
function regExpFromMatch(matchArray) {
return matchArray.map(
(string) =>
new RegExp(string.replace(/\//g, `\/`).replace(/\*/g, ".*"), "g")
);
}
}
});
New to react... Really banging my head against it with this one... I'm trying to figure out how to get a dynamically inserted component to update when the props are changed. I've assigned it to a parent state object but it doesn't seem to re-render. I've read that this is what's supposed to happen.
I was using ReactDOM.unmountComponentAtNode to re-render the specific elements I needed to, but it kept yelling at me with red text.
I need to hide "chat.message" unless the user has the authority to see it (server just sends empty string), but I still need to render the fact that it exists, and reveal it should the user get authentication. I'm using a css transition to reveal it, but I really need a good way to update the chat.message prop easily.
renderChats(uuid){
let userState = this.state.userStates.find(user => {
return user.uuid === uuid;
});
const children = userState.chats.map((chat) => {
let ChatReactElement = this.getChatMarkup(chat.cuid, chat.message, chat.status);
return ChatReactElement;
});
ReactDOM.render(children, document.getElementById(`chats-${this.state.guid}-${uuid}`));
}
getChatMarkup() just returns JSX and inserts Props... I feel like state should be getting passed along here. Even when I use a for-loop and insert the state explicitly, it doesn't seem to re-render on changes.
getChatMarkup(cuid, message, status){
return(
<BasicChatComponent
key={cuid}
cuid={cuid}
message={message}
status={status}
/>
);
}
I attempted to insert some code line this:
renderChats(uuid){
let userState = this.state.userStates.find(user => {
return user.uuid === uuid;
});
const children = userState.chats.map((chat) => {
let ChatReactElement = this.getChatMarkup(chat.cuid, chat.message, chat.status);
if(chat.status.hidden)
this.setState({ hiddenChatRE: [ ...this.state.hiddenChatRE, ChatReactElement ] }); // <== save elements
return ChatReactElement;
});
ReactDOM.render(children, document.getElementById(`chats-${this.state.guid}-${uuid}`));
}
and later in my code:
this.state.hiddenChatRE.every(ReactElement => {
if(ReactElement.key == basicChats[chatIndex].cuid){
ReactElement.props = {
... //completely invalid code
}
}
});
The only response I see here is my ReactDOM.unmountComponentAtNode(); approach...
Can anyone point me in the right direction here?
Although perhaps I should be kicking myself, I read up on how React deals with keys on their components. So there's actually a fairly trivial answer here if anyone comes looking... Just call your render function again after you update the state.
In my case, something like:
this.setState(state =>({
...state,
userStates : state.userStates.map((userstate) => {
if(userstate.uuid == basicChats[chatIndex].uuid) return {
...userstate,
chats: userstate.chats.map((chat) => {
if(chat.cuid == basicChats[chatIndex].cuid){
//
return {
cuid: basicChats[chatIndex].cuid,
message: basicChats[chatIndex].message,
status: basicChats[chatIndex].status
}
}
else return chat;
})
}
else return userstate;
})
}));
and then, elsewhere in my example:
this.state.userStates.map((userstate) => {
this.renderChats(userstate.uuid);
});
Other than the fact that I'd recommend using indexed arrays for this example to cut complexity, this is the solution, and works. This is because even though it feels like you'd end up with duplicates (that was my intuition), the uid on the BasicChatComponent itself makes all the difference, letting react know to only re-render those specific elements.
I am trying to use puppeteer in order to fill in a form and get the results.
when the form is submitted correctly, a table containing the results appear which has #some_id. Now I'm looking for a good way to wait until the table is loaded and if the code fails, redo the process of filling in the form until it works correctly. I want it to do something like this (pseudo code):
while(table_is_not_loaded){
get_information;
fill_in_the_form;
submit_the_form;
}
I think that it's maybe achievable using page.waitForSelector() function, but I can't use it the way I want and I also don't know how it handle errors if the selector is not ready or visible.
You could do something like this:
let table_is_loaded = true;
await page.waitForSelector('someID').catch(e => table_is_loaded = false);
while(!table_is_loaded){
get_information;
fill_in_the_form;
submit_the_form;
table_is_loaded = true;
await page.waitForSelector('someID').catch(e => table_is_loaded = false);
}
Maybe something like:
while(true){
try {
await page.waitForSelector('#foo')
get_information;
fill_in_the_form;
submit_the_form;
break
} catch(e) {
}
}
after some searching and trying different pieces of code , i came to a solution and it was using the.$eval() method to access html attributes and checking the height of the element( you could also check other things as well like display or visibility )
const isNotHidden = await mainPage.$eval(
"#some_id",
elem => {
return (
window.getComputedStyle(elem).getPropertyValue("height") >= "5px"
);
}
);
link to main answer that helped me achieve this : https://stackoverflow.com/a/47713155/11968594
I have a JSON file of 2 discord client IDs `{
{
"premium": [
"a random string of numbers that is a client id",
"a random string of numbers that is a client id"
]
}
I have tried to access these client IDs to do things in the program using a for loop + if statement:
for(i in premium.premium){
if(premium.premium[i] === msg.author.id){
//do some stuff
}else{
//do some stuff
When the program is ran, it runs the for loop and goes to the else first and runs the code in there (not supposed to happen), then runs the code in the if twice. But there are only 2 client IDs and the for loop has ran 3 times, and the first time it runs it goes instantly to the else even though the person who sent the message has their client ID in the JSON file.
How can I fix this? Any help is greatly appreciated.
You may want to add a return statement within your for loop. Otherwise, the loop will continue running until a condition has been met, or it has nothing else to loop over. See the documentation on for loops here.
For example, here it is without return statements:
const json = {
"premium": [
"aaa-1",
"bbb-1"
]
}
for (i in json.premium) {
if (json.premium[i] === "aaa-1") {
console.log("this is aaa-1!!!!")
} else {
console.log("this is not what you're looking for-1...")
}
}
And here it is with return statements:
const json = {
"premium": [
"aaa-2",
"bbb-2"
]
}
function loopOverJson() {
for (i in json.premium) {
if (json.premium[i] === "aaa-2") {
console.log("this is aaa-2!!!!")
return
} else {
console.log("this is not what you're looking for-2...")
return
}
}
}
loopOverJson()
Note: without wrapping the above in a function, the console will show: "Syntax Error: Illegal return statement."
for(i in premium.premium){
if(premium.premium[i] === msg.author.id){
//do some stuff
} else{
//do some stuff
}
}
1) It will loop through all your premium.premium entries. If there are 3 entries it will execute three times. You could use a break statement if you want to exit the loop once a match is found.
2) You should check the type of your msg.author.id. Since you are using the strict comparison operator === it will evaluate to false if your msg.author.id is an integer since you are comparing to a string (based on your provided json).
Use implicit casting: if (premium.premium[i] == msg.author.id)
Use explicit casting: if (premium.premium[i] === String(msg.author.id))
The really fun and easy way to solve problems like this is to use the built-in Array methods like map, reduce or filter. Then you don't have to worry about your iterator values.
eg.
const doSomethingAuthorRelated = (el) => console.log(el, 'whoohoo!');
const authors = premiums
.filter((el) => el === msg.author.id)
.map(doSomethingAuthorRelated);
As John Lonowski points out in the comment link, using for ... in for JavaScript arrays is not reliable, because its designed to iterate over Object properties, so you can't be really sure what its iterating on, unless you've clearly defined the data and are working in an environment where you know no other library has mucked with the Array object.
I am doing e2e testing on a site that contains a table which I need to iterate "until" finding one that doesn't fail when I click on it.
I tried it using filter and it is working:
this.selectValidRow = function () {
return Rows.filter(function (row, idx) {
row.click();
showRowPage.click();
return errorMessage.isDisplayed().then(function (displayed) {
if (!displayed) {
rowsPage.click(); // go back to rows Page, all the rows
return true;
}
});
}).first().click();
};
The problem here is that it is iterating all available rows, and I only need the first one that is valid (that doesn't show an errorMessage).
The problem with my current approach is that it is taking too long, as my current table could contain hundreds of rows.
Is it possible to filter (or a different method) and stop iterating when first valid occurrence appears?, or could someone come up with a better approach?
If you prefer a non-protractor approach of handling this situation, I would suggest async.whilst. async is a very popular module and its highly likely that your application is using it. I wrote below code here in the editor, but it should work, you can customize it based on your needs. Hopefully you get an idea of what I'm doing here.
var found = false, count = 0;
async.whilst(function iterator() {
return !found && count < Rows.length;
}, function search(callback) {
Rows[count].click();
showRowPage.click();
errorMessage.isDisplayed().then(function (displayed) {
if (!displayed) {
rowsPage.click(); // go back to rows Page, all the rows
found = true; //break the loop
callback(null, Rows[count]); //all good, lets get out of here
} else {
count = count + 1;
callback(null); //continue looking
}
});
}, function aboutToExit(err, rowIwant) {
if(err) {
//if search sent an error here;
}
if(!found) {
//row was not found;
}
//otherwise as you were doing
rowIwant.click();
});
You are right, filter() and other built-in Protractor "functional programming" methods would not solve the "stop iterating when first valid occurrence appears" case. You need the "take some elements while some condition evaluates to true" (like the itertools.takewhile() in Python world).
Fortunately, you can extend ElementArrayFinder (preferably in onPrepare()) and add the takewhile() method:
Take elements while a condition evaluates to true (extending ElementArrayFinder)
Note that I've proposed it to be built-in, but the feature request is still open:
Add takewhile() method to ElementArrayFinder