Inconsistent assert behavior for text

Commencez par exécuter les scénarios fournis avec examples/returns.html et examples/bootstrap.html, puis comparez I.see, I.waitForText et I.grabTextFrom avec #app et #app.at(1). Suivez l’origine du texte obtenu par chaque assertion et la manière dont il est normalisé. Le travail est terminé lorsque le comportement attendu du texte est défini et cohérent pour ces méthodes, ces sélecteurs et les cas d’espaces et de styles.

Hello!

While experimenting with codecept I noticed inconsistent behaviors between the testing methods.

Here are two tests:

• The first contains spans that have numbers in them. The asserts are generally consistent (they add spaces to each span) except grabTextFrom, which adds \n.
• The second is much more problematic. In this one, the HTML also contains spans, but with bootstrap styles on the spans. We can see that:
  • I.see adds spaces
  • I.waitForText does not
  • nor does I.grabTextFrom
  • BUT when we add .at(1) to the locator, it changes the behavior of waitForText().

The way the text is asserted changes depending on:

• the CSS of the page
• the assertion method used
• the selector
• the whitespaces in the HTML

import { writeFileSync } from "node:fs";
import { resolve } from "node:path";

Feature("Spans");

Scenario("text line returns", async ({ I }) => {
  const file = `${resolve(process.cwd(), "examples", "returns.html")}`;
  writeFileSync(file, `
  <div id="app">
    <span>1</span>
    <span>2</span>
    <span>3</span>
  </div>
  `);
  I.amOnPage(`file://${file}`);

  const appLocator = locate("#app");

  I.see("1 2 3", appLocator);
  I.waitForText("1 2 3", 1, appLocator);

  const text = await I.grabTextFrom(appLocator);
  I.expect(text).toEqual("\n    1\n    2\n    3\n  ");

  I.see("1 2 3", appLocator.at(1));
  I.waitForText("1 2 3", 1, appLocator.at(1));

  const text2 = await I.grabTextFrom(appLocator.at(1));
  I.expect(text2).toEqual("\n    1\n    2\n    3\n  ");
});

Scenario("test boostrap styles", async ({ I }) => {
  const file = `${resolve(process.cwd(), "examples", "bootstrap.html")}`;
  writeFileSync(file, `
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">
<div class="d-flex align-items-baseline lh-1 monospace-numbers" id="app"><span class="text-nowrap fs-21 lh-1">0</span><span class="text-nowrap fs-21 lh-1">.</span><span class="text-nowrap fs-21 lh-1">8</span><span class="text-nowrap fs-21 lh-1">8</span><span class="text-nowrap fs-48 lh-1">6</span><span class="text-nowrap fs-48 lh-1">7</span><span class="text-nowrap fs-18 lh-1 align-self-start mt-1">8</span></div>
  `);
  I.amOnPage(`file://${file}`);

  const appLocator = locate("#app");

  I.see("0 . 8 8 6 7 8", appLocator);
  I.waitForText("0.88678", 1, appLocator);

  const text = await I.grabTextFrom(appLocator);
  I.expect(text).toEqual("0.88678");

  I.see("0 . 8 8 6 7 8", appLocator.at(1));
  // IDK what it expects... it just does not work the same with .at(1)!!!!
  // I.waitForText("0.88678", 1, appLocator.at(1));

  const text2 = await I.grabTextFrom(appLocator.at(1));
  I.expect(text2).toEqual("0.88678");
});