Webscrape testing on a text field with jest-puppeteer

Question

Okay everyone, got a bit of a doozy here. I am attempting to write a test using Jest and puppeteer for an email field. The problem is that I cannot seem to figure out how to get this test working. What I want to test is that if a user types in nothing into the email field, then an error message is displayed properly. I have attached photos of the CSS selector properties where you will find a customError: This cycles between true and false if valid inputs are in or not. I have also attached the HTML snippet where you will find the Id. I am a beginner at webscraping, JS, puppeteer, and Jest so I know this isn't ideal and I am sure there are many issues with my code. email text field image CSS selector props close-up image full view with devtools

I guess I cant embed images yet either so the links are provided!

test('empty field', async () => {
      browser = await puppeteer.launch();
      page = await browser.newPage();

      await page.goto('https://platform.adcritter.com/')
      await page.click('input[name=email]');
      await page.type('input[name=email]', '') // no input

      const doesItPass = await page.$$eval('input#if248af80-b989-11eb-8fad-f1ae53f1cff4',
          validity => {expect({customError:true})}
      )
      browser.close()
    }, 10000)

<input type="text" id="if248af80-b989-11eb-8fad-f1ae53f1cff4" name="email" placeholder="[email protected]" class="euiFieldText euiFieldText--withIcon euiFieldText--fullWidth" tabindex="1" autocomplete="email" value="" aria-describedby="if248af80-b989-11eb-8fad-f1ae53f1cff4-error-0">