How to avoid StaleElementReferenceError in protractor

Question

I am new to protractor and am starting to write tests for our existing applications. Over the last couple of days I've spent many hours trying to resolve intermittent StaleElementReferenceError when trying to check the text in an element. It's a race condition error which is making it even harder to fix as I'll think I've fixed it but then I'll get the error again.

My code looks like this:

await browser.wait(
    ExpectedConditions.and(
        ExpectedConditions.presenceOf(getMyElementArrayFinder().get(index)),
        ExpectedConditions.visibilityOf(getMyElementArrayFinder().get(index)),
    ),
    undefined,
    `Waiting for visibility and prescence of element at index ${index} with expected text '${expectedText}'`,
);

console.log(`Getting text`);

const text = await getMyElementArrayFinder()
    .get(index)
    .getText();

console.log(`text: ${text}`);

expect(text).to.equal(
    expectedTextArray[index],
    `Expected text at index ${index} to be ${expectedTextArray[index]}`,
);

and I get StaleElementReferenceError: stale element reference: element is not attached to the page document when I try to resolve the text of the element.

I can't understand how I have waited for the element to be visible and present (I can probably just check for visibility here but I'm trying belt and braces and duct tape at the moment...) and can then still get a warning about the element not being attached to the dom.

I am using protractor 5.4.0, selenium-server-standalone-jar 3.141.5 and chromedriver 77.0.0

I have set SELENIUM_PROMISE_MANAGER to false;