How to hide a webpage element from a webdriver browser.url call

Our webdriver test needs to hide an element that is getting recorded multiple times in screenshots as the browser scrolls down the page. It is a floating element.

I have:

 it('should save Food blog page screenshotsscreenshots', async () => {
    const adjustedURL = new browser();
    await adjustedURL
      .url('en-au/blog/elements-and-templates-food-sustainability/')
      .execute(() => {document.getElementByID("_hjSafeContext_7335155").style["opacity"] = "0";})
      .pause(4000)
      .saveFullPageScreen('AU-Food-blog', {});
  });

but receive an error TypeError: browser is not a constructor.

If I use:

  it('should save Food blog page screenshotsscreenshots', async () => {
    await browser
      .url('en-au/blog/elements-and-templates-food-sustainability/')
      .execute(() => {document.getElementByID("_hjSafeContext_7335155").style["opacity"] = "0";})
      .pause(4000)
      .saveFullPageScreen('AU-Food-blog', {});
  });

I get browser.url(...).execute is not a function

Edit2, perhaps the Intercom HTML changed, and I now need to target .intercom-lightweight-app:

  it('should save Food blog page', async () => {
    await browser.url('en-au/blog/elements-and-templates-food-sustainability/');
    await browser.pause(7000)
    await browser.execute(() => {document.querySelector(".intercom-lightweight-app").style.display = "none";});
    await browser.execute(() => {document.querySelector(".intercom-lightweight-app").style.position = "relative";});
    await browser.saveFullPageScreen('AU-Food-blog', {});
  });

If I set the opacity of .intercom-lightweight-app-launcher to 0 manually, the Intercom widget becomes invisible, but the above changes to the webdriver code mean the Intercom widget is still baked into the screenshot.

It doesn't look like you can chain browser methods with WebdriverIO. Instead you can reuse the browser object, and await each method, like so:

  it('should save Food blog page screenshots', async () => {
    await browser.url('en-au/blog/elements-and-templates-food-sustainability/');
    // intercom might be loaded with different class names, we want to select all of them
    var intercom = await browser.$('.intercom-app, .intercom-lightweight-app');
    // waits up to 30 seconds for the element to be added to DOM
    await intercom.waitForExist({ timeout: 30000 });
    await browser.execute(() => {document.querySelector(".intercom-app, .intercom-lightweight-app").style.opacity = "0";});
    await browser.pause(4000);
    await browser.saveFullPageScreen('AU-Food-blog', {});
    // some test here
  });