FAQs and support
/
FAQs
/
How can I test Frontegg login?
Last updated

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.

Below 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
  })
})

Ignored emails

You can exclude specific email addresses from the Bot Detection security rule to prevent interruptions during testing.