Repository: ionic-team/ionic-framework
File: core/src/components/textarea/test/rows/textarea.e2e.ts (TypeScript)

Code before:
        <div id="container" style="display: flex; flex-direction: column; gap: 20px;">
          <h2>Rows: 1</h2>
          <ion-textarea
            rows="1"
            label="Small"
            value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
          ></ion-textarea>
          <h2>Rows: 3</h2>
          <ion-textarea
            rows="3"
            label="Medium"
            value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
          ></ion-textarea>
          <h2>Rows: 8</h2>
          <ion-textarea
            rows="8"
            label="Large"
            value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
          ></ion-textarea>
        </div>
      `,
        config
      );

      const container = page.locator('#container');
      await expect(container).toHaveScreenshot(screenshot(`textarea-rows-different-values`));
    });

    test('should respect rows attribute with different sizes', async ({ page }) => {
      await page.setContent(
        `
        <div id="container" style="display: flex; flex-direction: column; gap: 20px;">
          <h2>Rows: 3, Size Small</h2>
          <ion-textarea
            rows="3"
            size="small"
            label="Small Size"
            value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
          ></ion-textarea>
          <h2>Rows: 3, Size Medium</h2>
          <ion-textarea
            rows="3"
            size="medium"
            label="Medium Size"
            value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
          ></ion-textarea>
          <h2>Rows: 3, Size Large</h2>
          <ion-textarea
            rows="3"
            size="large"
            label="Large Size"

Review comment (suggestion):
Let's be consistent with the standards of the file naming:

```suggestion
      await expect(container).toHaveScreenshot(screenshot(`textarea-rows`));
```

Plus, we don't need to explain that it has different values, it's pretty straight forward since the attribute is known to accept different values.

Code after:
        <div id="container" style="display: flex; flex-direction: column; gap: 20px;">
          <ion-textarea
            rows="1"
            label="Comments"
            value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
          ></ion-textarea>
          <ion-textarea
            rows="3"
            label="Comments"
            value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
          ></ion-textarea>
          <ion-textarea
            rows="8"
            label="Comments"
            value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
          ></ion-textarea>
        </div>
      `,
        config
      );

      const container = page.locator('#container');
      await expect(container).toHaveScreenshot(screenshot(`textarea-rows`));
    });

    test('should respect rows attribute with different sizes', async ({ page }) => {
      await page.setContent(
        `
        <div id="container" style="display: flex; flex-direction: column; gap: 20px;">
          <ion-textarea
            rows="3"
            size="small"
            label="Small Size"
            value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
          ></ion-textarea>
          <ion-textarea
            rows="3"
            size="medium"
            label="Medium Size"
            value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
          ></ion-textarea>
          <ion-textarea
            rows="3"
            size="large"
            label="Large Size"
            value="1&#10;2&#10;3&#10;4&#10;5&#10;6&#10;7&#10;8&#10;9&#10;0"
          ></ion-textarea>
        </div>
      `,
        config
      );