Category: testing

All type of tests for your application

27/02/2025 Nicolas Baptista testing 0 Comments

1. Functional Tests

These tests check if the application works according to specifications.

✅ Unit Tests

  • Test individual functions, methods, or components in isolation.
  • Examples: Jest, Mocha, Jasmine.

✅ Integration Tests

  • Verify the communication between multiple modules or services.
  • Examples: API testing with Postman, Supertest, Cypress.

✅ End-to-End (E2E) Tests

  • Simulate user behavior from start to finish in a scenario.
  • Examples: Cypress, Playwright, Selenium.

✅ Regression Tests

  • Ensure that new changes haven’t broken existing functionalities.
  • Tools: Selenium, Cypress, Jest with snapshot testing.

✅ Acceptance Tests

  • Ensure the application meets user expectations.
  • Often performed by testers or clients.

2. Non-Functional Tests

These evaluate aspects such as performance, security, and accessibility.

✅ Performance Tests

  • Check the speed, responsiveness, and stability under load.
  • Tools: JMeter, K6, Lighthouse.

✅ Load Tests

  • Assess how the application reacts under a high number of simultaneous users.
  • Tools: Gatling, Locust.

✅ Security Tests

  • Identify vulnerabilities against attacks (XSS, SQL Injection, etc.).
  • Tools: OWASP ZAP, Burp Suite, SonarQube.

✅ Accessibility Tests

  • Ensure the application is usable by people with disabilities.
  • Tools: axe DevTools, Lighthouse.

✅ UX/UI Tests

  • Check usability and consistency of the user interface.
  • Tools: Hotjar, UserTesting.

3. Manual vs Automated Tests

  • Manual: Performed by human testers (exploratory testing, user scenarios).
  • Automated: Scripts executed to test quickly and at scale.

Conclusion

An effective testing strategy includes a combination of these tests depending on the project’s needs.

Playwright: Count all the components on the page

04/10/2023 Nicolas Baptista Javascript, Playwright, testing 0 Comments

Is it possible that you have to debug Playwright and list all the available items on the page, so you can know if your locate your item const buttons = await page.$$(‘button’); or your click await buttonButton1.click() will work. To do so you can list all items and also highlight them when you run npx playwright test , add the following in your playwright test file, in any test:

  const componentHandles = await page.evaluateHandle(() => {
    const components = new Map();
    const walker = document.createTreeWalker(
      document.body,
      NodeFilter.SHOW_ELEMENT,
    );

    while (walker.nextNode()) {
      const element = walker.currentNode as HTMLElement;
      const nodeName = element.nodeName.toLowerCase();
      if (components.has(nodeName)) {
        components.set(nodeName, components.get(nodeName) + 1);
      } else {
        components.set(nodeName, 1);
      }
      element.style.border = '2px solid red'; // Highlight the component
    }

    return Array.from(components);
  });

  const componentCount = await componentHandles.jsonValue();

  console.log('Component count:');
  for (const [component, count] of Object.entries(componentCount)) {
    console.log(`${component}: ${count}`);
  }

Result:

0: noscript,1
1: script,1
2: div,41
3: input,3
4: span,3
5: aside,1
6: style,1
7: button,2
8: svg,1
9: g,2
10: path,3

And it will display on the web browser you item with red borders.

Nicolas BAPTISTA