How to test your Frontegg login?

Frontegg Login Box uses Shadow DOM and in order to run automations and tests on the login box, you will need to access the elements inside of the Shadow DOM using Frontegg `data-test-id` identifiers. 

Here are a few examples to access Frontegg login box elements:

Selenium

document.getElementById("frontegg-login-box-container-default")
        .shadowRoot.querySelector('[data-test-id="submit-btn"]')
        .click();

Puppetteer

const selectElementInShadowDom = (containerSelector, elementSelector) => {
  try {
    return document
      .querySelector(containerSelector)
      .shadowRoot.querySelector(elementSelector);
  } catch (err) {
    throw new Error(err);
  }
};

describe("Select shadow element", () => {
  jest.setTimeout(50000);
  it("Should show login error", async () => {
    await page.goto("https://[your-frontegg-domain]/oauth/account/login");
    await page.waitForSelector('input[data-test-id="input-email"]');
    await page.type('input[data-test-id="input-email"]', "some@email.com");
    await page.type('input[data-test-id="input-password"]', "123456");
    const shadowDomContainerSelector = "#frontegg-login-box-container-default";
    const elementSelector = '[data-test-id="submit-btn"]';
    await page.waitForFunction(
      selectElementInShadowDom,
      { timeout: 5000 },
      shadowDomContainerSelector,
      elementSelector
    );
    const element = await page.evaluateHandle(
      selectElementInShadowDom,
      shadowDomContainerSelector,
      elementSelector
    );
    await element.click();
    const errorSelector = ".MuiAlert-message";
    await page.waitForFunction(
      selectElementInShadowDom,
      { timeout: 5000 },
      shadowDomContainerSelector,
      errorSelector
    );
    const errorElem = await page.evaluateHandle(
      selectElementInShadowDom,
      shadowDomContainerSelector,
      errorSelector
    );
    const value = await errorElem.evaluate((el) => el.textContent);
    expect(value).toEqual("Incorrect email or password");
  })
}); 

Cypress

const email = "[YOUR_EMAIL]"
const password = "[YOUR_PASSWORD]"

describe('Login', () => {
  
  beforeEach(() => {
    cy.visit('http://localhost:3000/account/login')
  })
  it('Logs in a user', () => {
    cy.get('input').eq(0).type(`${username}{enter}`)  // Get 1st input, type email & return key
    cy.get('input').eq(1).type(`${password}{enter}`)  // Get 2nd input, type email & return key
  })
})

TIP!