Repository: penpot/penpot
File: frontend/playwright/ui/pages/WorkspacePage.js (JavaScript)

Code before:
    await this.clickLeafLayer(name, clickOptions);
  }

  async clickToggableLayer(name, clickOptions = {}, index = 0) {
    const layer = this.layers
      .getByTestId("layer-row")
      .filter({ hasText: name })
      .nth(index);
    const button = layer.getByTestId("toggle-content");

    await expect(button).toBeVisible();
    await button.click(clickOptions);
    await button.waitFor({ ariaExpanded: true });
  }

  async expectSelectedLayer(name) {
    await expect(
      this.layers
        .getByTestId("layer-row")
        .filter({ has: this.page.getByText(name) }),
    ).toHaveClass(/selected/);
  }

  async getSelectedShapeName() {
    const selectedLayer = this.layers.locator(
      '[data-testid="layer-row"][class*="selected"]',
    ).first();
    await selectedLayer.waitFor({ state: "visible" });
    return (await selectedLayer.innerText()).trim();
  }

  async waitForSelectedShapeName(expectedName) {
    const selectedLayer = this.layers.locator(
      '[data-testid="layer-row"][class*="selected"]',
    ).first();
    await expect(selectedLayer).toHaveText(expectedName);
  }

  async expectHiddenToolbarOptions() {
    await expect(this.toolbarOptions).toHaveCSS("opacity", "0");
  }

  async clickAssets(clickOptions = {}) {
    await this.sidebar.getByText("Assets").click(clickOptions);
  }
  async clickLayers(clickOptions = {}) {
    await this.sidebar.getByText("Layers").click(clickOptions);
  }

  async openLibrariesModal(clickOptions = {}) {
    await this.sidebar.getByTestId("libraries").click(clickOptions);

Review comment (bug):
This will break if we change the CSS. Let's add a `role="checkbox"` `:aria-checked` attribute  ([docs](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-checked)) to  the `layer-item-inner` component so we can later use something like `getByRole("checkbox", { name: "Foo", checked: true}`

Code after:
      .getByTestId("layer-row")
      .filter({ hasText: name })
      .nth(index);
    const button = layer.getByTestId("toggle-content");

    await expect(button).toBeVisible();
    await button.click(clickOptions);
    await button.waitFor({ ariaExpanded: true });
  }

  async expectSelectedLayer(name) {
    await expect(
      this.layers.getByRole("checkbox", { name, checked: true }),
    ).toBeVisible();
  }

  async getSelectedShapeName() {
    const selectedLayer = this.layers
      .getByRole("checkbox", { checked: true })
      .first();
    await selectedLayer.waitFor({ state: "visible" });
    return (await selectedLayer.innerText()).trim();
  }

  async waitForSelectedShapeName(expectedName) {
    const selectedLayer = this.layers
      .getByRole("checkbox", { checked: true })
      .first();
    await expect(selectedLayer).toHaveText(expectedName);
  }

  async expectHiddenToolbarOptions() {
    await expect(this.toolbarOptions).toHaveCSS("opacity", "0");
  }

  async clickAssets(clickOptions = {}) {
    await this.sidebar.getByText("Assets").click(clickOptions);
  }
  async clickLayers(clickOptions = {}) {
    await this.sidebar.getByText("Layers").click(clickOptions);
  }

  async openLibrariesModal(clickOptions = {}) {
    await this.sidebar.getByTestId("libraries").click(clickOptions);
    await expect(this.librariesModal).toBeVisible();
  }

  async clickLibrary(name, clickOptions = {}) {
    await this.page
      .getByTestId("library-item")
      .filter({ hasText: name })