This is the most frustrated i've been in a while. I'm writing tests in Javascript (Protractor) and I just want it to click elements on my page. Probably 10% (or less) of the time it actually works correctly, the other 90% of the time I get this error:

Failed: element click intercepted: Element is not clickable at point (x,y)

Yes. I have seen other posts about this and I have tried all the "solutions" but none of them make it work 100% of the time.

it('Full Width Video test', async() => {
        const fwv = await blocks.fullWidthVideo;
        
        browser.executeScript("arguments[0].scrollIntoView(true);", fwv);
        await expect(await fwv).toBeDisplayed();
        await expect(await blocks.fullWidthVideoImg).toBeDisplayed();
        
// tried this
        // browser.manage().timeouts().implicitlyWait(10000) 

// also tried this     
        // const EC = new protractor.ProtractorExpectedConditions();
        // await browser.wait(EC.elementToBeClickable(
        //     element(blocks.fullWidthVideoImg))), 
        //     5000,' item is not clickable after 5 seconds');

// also also tried this
        // let ele = browser.findElement(blocks.fullWidthVideoImg));
        // browser.actions().mouseMove(ele).click().perform();

        await blocks.fullWidthVideoImg.click();
        await expect(await blocks.fullWidthVideoIframe).toBeDisplayed();
    });

export class Blocks { 
// Full Width Video
    get fullWidthVideo() {
        return element(by.xpath('//div[@data-test="fullwidthvideo"]'))
    }

    get fullWidthVideoImg() {
        const fwv = this.fullWidthVideo;
        return fwv.element(by.xpath('./div[@data-test="video-img"]')))
    }

    get fullWidthVideoIframe() {
        const fwv = this.fullWidthVideo;
        return fwv.element(by.xpath('./div[@data-test="video-iframe"]')))
    }
}