How to select a element by role and also for css selector in Playwright.ts

// It is possible using .and locator https://playwright.dev/docs/api/class-locator#locator-and
import { test, expect } from "@playwright/test";

test(" Text input actions", async ({ page }) => {
  await page.goto("https://testautomationpractice.blogspot.com/");
  const textBox = page.getByRole('textbox').and(page.locator("#name"));
  await textBox.fill("Playwright");
  await expect(textBox).toHaveValue("Playwright");
});