E2E & Performance Testing — Series 2

Preview — 3 of 10 questions

Which selector strategy is most resilient to UI refactors when writing E2E tests?

javascript

// Fragile
cy.get('.btn.btn-primary.mt-4').click();

// Resilient
cy.get('[data-testid="submit-order"]').click();

AUsing the longest possible CSS class selector, since more specificity means more reliability.

BUsing the element's exact pixel position on the page (x/y coordinates).

CUsing a dedicated data-testid attribute — it's decoupled from CSS classes, styling, and text content, all of which change frequently during refactors, redesigns, or translations, while a purpose-built test attribute stays stable.

DUsing the button's visible text in the user's currently selected language, since text is guaranteed to never change.

What is the benefit of structuring E2E tests around a LoginPage class like this, known as the Page Object Model?

javascript

class LoginPage {
  visit() {
    cy.visit('/login');
  }
  fillEmail(email) {
    cy.get('[data-testid="email"]').type(email);
  }
  fillPassword(password) {
    cy.get('[data-testid="password"]').type(password);
  }
  submit() {
    cy.get('[data-testid="login-button"]').click();
  }
}

const loginPage = new LoginPage();
loginPage.visit();
loginPage.fillEmail('alice@example.com');
loginPage.fillPassword('secret123');
loginPage.submit();

AIt makes tests run faster by skipping network requests entirely.

BIt is required syntax for Cypress; tests cannot use cy.get() directly without a Page Object class.

CIt replaces the need for data-testid attributes, since Page Objects use AI to find elements automatically.

DIt centralizes knowledge of the login page's structure (selectors, interactions) into one reusable class — if the login page's markup changes, only LoginPage needs updating, rather than every individual test that interacts with the login flow.

Which set correctly identifies Google's three Core Web Vitals metrics and what each measures?

ALCP (Largest Contentful Paint) — how long until the largest visible content element renders; INP (Interaction to Next Paint) — how responsive the page is to user interactions; CLS (Cumulative Layout Shift) — how much visible content unexpectedly shifts position during load.

BLCP (Lines of Code Produced), INP (Internal Network Ping), CLS (Cache Loading Speed).

CLCP, INP, and CLS are all different names for the exact same page-load-time metric.

DLCP measures CPU temperature, INP measures internet provider speed, and CLS measures console log size.

Answer all 10 questions (7 more), see explanations for every answer, and track your score.