I have conditional text that will change, and that don't have many similar words.
Is there a way to use cssContainingText conditionally? The documents seem to indicate that only string or regex values can be used, but I was wondering if there was a workaround?
Below code is just a rough example, but hopefully paints the picture.
let text;
if (a){
text = 'John Doe is a name';
} else if (b) {
text = 'Hello world';
} else if (c) {
text = 'This is a whole new sentence';
} else {
text = 'Default text'
}
return <div className='my-text'>{text}</div>;
element(
by.cssContainingText(
'my-text',
["/*Insert logic for conditional*/", ],
// even something like, 'text' || 'text-2' || 'text-3'
),
);
Easiest option is probably to use ExpectedConditions and just wait for the element to be visible. Meaning, do whatever actions will cause the text to change, and then wait for that element to become visible on the page. You can approach it two ways, either define all the elements you expect to be on the page, or create a function where you pass in the text you are looking for and wait for it to be ready. My examples below assumes you have already defined EC and a custom wait time somewhere else in the class already.
const someText = 'my sample text';
await waitForElementWithText(someText);
// now do other stuff once element is visible
....
async function waitForElementWithText(waitForText) {
const elem = element(by.cssContainingText(waitFortext));
return browser.wait(EC.visibilityOf(elem), myWaitTime);
}
Or if you need to interact with that element after waiting for it then just declare the element and pass it into the wait function
const elem1 = element(by.cssContainingText('my sample text');
const elem2 = element(by.cssContainingText('my other text');
// do some stuff that makes elem2 visible
await waitForElementVisible(elem2);
// now you can interact with elem2
...
async function waitForElementVisible(elem) {
return browser.wait(EC.visibilityOf(elem), myWaitTime);
}