How to extract text and validate a notification message in protractor? - async-await

Question

Problem: I would like to extract text from an element and would like to use that text to append in a validation message. How do i achieve that?
What i tried so far?
My validation message has an unique ID appended to the message. For example ( 'Story ID: 123 has been Created'). So, i would like to get the story id and then append it to my validation message.
Please find the below code snippets:
Locator to get the text:
element(by.css('.story-id'))
Method which is used to assert the validation message( From Card PO):
async validateMessage(message) {
await expect(element(by.css('.ng-star-inserted')).getText()).toEqual(message);
}
Here, message would contain something like 'Story ID has been created'.
My spec file will have something like this,
await card.validateMessage('Story ID has been created') where Story ID changes everytime.

Answer 1

Not sure why you need to pass the message as a parameter if you know how it should look like...But in case your message is changing (but it always contains story id) you can write a couple of different expects to test each message.
Something like this:
async validateSuccessMessage(id) {
let messageElement = element(element(by.cssContainingText(".story-id", id)))
let messageText = await messageElement.getText()
expect(await messageText).toMatch(`Story ID: ${id} has been Created`)
}
and
async validateFailMessage(id) {
let messageElement = element(element(by.cssContainingText(".story-id", id)))
let messageText = await messageElement.getText()
expect(await messageText).toMatch(`Oops! Story ID: ${id} was not created`)
}
p.s. If cssContainingText does not work use Xpath (you did not include the HTML so I'm guessing here).
Sorry in advance if I got your idea wrong

Answer 2

expect() doesn't need await before it. But I did see it fail when you don't pass it to the parameter it takes. So it should be expect(await element.getText()).toBe("string")
Don't wrap expect to a function! Why? Because if it fails it'll point to the line number where if failed and ease the process of debugging. Just as a best practice
If you want to extract just the number from a string 'Story ID: 123 has been Created' use regex
let str = 'Story ID: 123 has been Created',
regex = /(Story ID:\s+)(\d+)/;
let result = str.match(regex);
console.log(result[2]); // 123 or any other integer that is there
I didn't get your question 100%, but I think you can take from here

Answer 3

Thanks everyone for suggestions and ideas. I was able the achieve with the below code snippet. Apologize if my question wasn't clear, but couple of answers were truly helpful in achieving the below.
/* Store the story id in messageText variable */
const messageElement = element(by.css('.story-id');
const messageText = messageElement.getText();
/* Since messageText returns a promise, i'm printing it to 'message' variable */
messageText.then(async function(message) {
console.log(message)
/* Verifying the text from message with actual text */
await expect(element(by.css('.ng-star-inserted').getText()).toEqual('"'+message+' sucessfully deleted.');
})
}