diff --git a/frontend/src/lib/components/canisters/CanisterCardTitle.svelte b/frontend/src/lib/components/canisters/CanisterCardTitle.svelte
index 09c72ef18c1..2fc1d72f938 100644
--- a/frontend/src/lib/components/canisters/CanisterCardTitle.svelte
+++ b/frontend/src/lib/components/canisters/CanisterCardTitle.svelte
@@ -11,7 +11,7 @@
   $: ({ canisterId, validName } = mapCanisterDetails(canister));
 </script>
 
-<div class={`title-block ${titleTag}`} data-tid="canister-card-title-compoment">
+<div class={`title-block ${titleTag}`} data-tid="canister-card-title-component">
   <svelte:element this={titleTag} class="title value"
     ><span>{validName ? canister.name : canisterId}</span>
     {#if !validName}
diff --git a/frontend/src/lib/components/canisters/SelectCyclesCanister.svelte b/frontend/src/lib/components/canisters/SelectCyclesCanister.svelte
index d6c3b66f336..9cba8caca60 100644
--- a/frontend/src/lib/components/canisters/SelectCyclesCanister.svelte
+++ b/frontend/src/lib/components/canisters/SelectCyclesCanister.svelte
@@ -67,6 +67,7 @@
 <form on:submit|preventDefault={selectAmount} data-tid="select-cycles-screen">
   <div class="inputs">
     <Input
+      testId="select-cycles-icp-input"
       placeholderLabelKey="core.icp"
       inputType="icp"
       name="icp-amount"
diff --git a/frontend/src/lib/components/ui/Input.svelte b/frontend/src/lib/components/ui/Input.svelte
index 5baf15d298d..cbc7642c923 100644
--- a/frontend/src/lib/components/ui/Input.svelte
+++ b/frontend/src/lib/components/ui/Input.svelte
@@ -2,6 +2,7 @@
   import { translate } from "$lib/utils/i18n.utils";
   import { Input } from "@dfinity/gix-components";
 
+  export let testId: string = "input-ui-element";
   export let name: string;
   export let inputType: "icp" | "number" | "text" = "number";
   export let required = true;
@@ -20,7 +21,7 @@
 </script>
 
 <Input
-  testId="input-ui-element"
+  {testId}
   {inputType}
   {required}
   {spellcheck}
diff --git a/frontend/src/lib/modals/canisters/AddCyclesModal.svelte b/frontend/src/lib/modals/canisters/AddCyclesModal.svelte
index 2ead741e61d..4a0c37f8cb9 100644
--- a/frontend/src/lib/modals/canisters/AddCyclesModal.svelte
+++ b/frontend/src/lib/modals/canisters/AddCyclesModal.svelte
@@ -97,7 +97,13 @@
   };
 </script>
 
-<WizardModal {steps} bind:currentStep bind:this={modal} on:nnsClose>
+<WizardModal
+  testId="add-cycles-modal-component"
+  {steps}
+  bind:currentStep
+  bind:this={modal}
+  on:nnsClose
+>
   <svelte:fragment slot="title"
     ><span data-tid="top-up-canister-modal-title"
       >{currentStep?.title ?? $i18n.accounts.select_source}</span
diff --git a/frontend/src/lib/modals/canisters/CreateCanisterModal.svelte b/frontend/src/lib/modals/canisters/CreateCanisterModal.svelte
index 895cb81560f..34ef482459b 100644
--- a/frontend/src/lib/modals/canisters/CreateCanisterModal.svelte
+++ b/frontend/src/lib/modals/canisters/CreateCanisterModal.svelte
@@ -103,7 +103,13 @@
   };
 </script>
 
-<WizardModal {steps} bind:currentStep bind:this={modal} on:nnsClose>
+<WizardModal
+  testId="create-canister-modal-component"
+  {steps}
+  bind:currentStep
+  bind:this={modal}
+  on:nnsClose
+>
   <svelte:fragment slot="title"
     ><span data-tid="create-canister-modal-title"
       >{currentStep?.title ?? $i18n.canisters.add_canister}</span
diff --git a/frontend/src/lib/pages/CanisterDetail.svelte b/frontend/src/lib/pages/CanisterDetail.svelte
index 13e572a29cf..0bf85c92353 100644
--- a/frontend/src/lib/pages/CanisterDetail.svelte
+++ b/frontend/src/lib/pages/CanisterDetail.svelte
@@ -217,6 +217,7 @@
 
   <Footer columns={1}>
     <button
+      data-tid="add-cycles-button"
       class="primary"
       on:click={openModal}
       disabled={canisterInfo === undefined || $busy}
diff --git a/frontend/src/lib/pages/Canisters.svelte b/frontend/src/lib/pages/Canisters.svelte
index c4032bc2da7..1251805d20f 100644
--- a/frontend/src/lib/pages/Canisters.svelte
+++ b/frontend/src/lib/pages/Canisters.svelte
@@ -6,6 +6,7 @@
   import { listCanisters } from "$lib/services/canisters.services";
   import { canistersStore } from "$lib/stores/canisters.store";
   import { AppPath } from "$lib/constants/routes.constants";
+  import TestIdWrapper from "$lib/components/common/TestIdWrapper.svelte";
   import SkeletonCard from "$lib/components/ui/SkeletonCard.svelte";
   import CanisterCard from "$lib/components/canisters/CanisterCard.svelte";
   import type { CanisterId } from "$lib/canisters/nns-dapp/nns-dapp.types";
@@ -64,52 +65,54 @@
   const closeModal = () => (modal = undefined);
 </script>
 
-<main>
-  <Summary displayUniverse={false}>
-    <PrincipalText slot="details" inline />
-  </Summary>
-
-  <div class="card-grid">
-    {#each $canistersStore.canisters ?? [] as canister (canister.canister_id)}
-      <CanisterCard
-        ariaLabel={$i18n.canisters.aria_label_canister_card}
-        href={buildCanisterDetailsHref(canister.canister_id)}
-        {canister}
-      />
-    {/each}
-
-    {#if loading}
-      <SkeletonCard />
-      <SkeletonCard />
+<TestIdWrapper testId="canisters-component">
+  <main>
+    <Summary displayUniverse={false}>
+      <PrincipalText slot="details" inline />
+    </Summary>
+
+    <div class="card-grid">
+      {#each $canistersStore.canisters ?? [] as canister (canister.canister_id)}
+        <CanisterCard
+          ariaLabel={$i18n.canisters.aria_label_canister_card}
+          href={buildCanisterDetailsHref(canister.canister_id)}
+          {canister}
+        />
+      {/each}
+
+      {#if loading}
+        <SkeletonCard />
+        <SkeletonCard />
+      {/if}
+    </div>
+
+    {#if noCanisters}
+      <p class="description empty">{$i18n.canisters.text}</p>
     {/if}
-  </div>
+  </main>
 
-  {#if noCanisters}
-    <p class="description empty">{$i18n.canisters.text}</p>
+  {#if modal === "CreateCanister"}
+    <CreateCanisterModal on:nnsClose={closeModal} />
   {/if}
-</main>
-
-{#if modal === "CreateCanister"}
-  <CreateCanisterModal on:nnsClose={closeModal} />
-{/if}
-{#if modal === "LinkCanister"}
-  <LinkCanisterModal on:nnsClose={closeModal} />
-{/if}
-
-<Footer>
-  <button
-    data-tid="create-canister-button"
-    class="primary"
-    on:click={() => openModal("CreateCanister")}
-    >{$i18n.canisters.create_canister}</button
-  >
-  <button
-    data-tid="link-canister-button"
-    class="secondary"
-    on:click={() => openModal("LinkCanister")}
-    >{$i18n.canisters.link_canister}</button
-  >
-</Footer>
+  {#if modal === "LinkCanister"}
+    <LinkCanisterModal on:nnsClose={closeModal} />
+  {/if}
+
+  <Footer>
+    <button
+      data-tid="create-canister-button"
+      class="primary"
+      on:click={() => openModal("CreateCanister")}
+      >{$i18n.canisters.create_canister}</button
+    >
+    <button
+      data-tid="link-canister-button"
+      class="secondary"
+      on:click={() => openModal("LinkCanister")}
+      >{$i18n.canisters.link_canister}</button
+    >
+  </Footer>
+</TestIdWrapper>
 
 <style lang="scss">
   @use "@dfinity/gix-components/dist/styles/mixins/media";
diff --git a/frontend/src/tests/e2e/canisters.spec.ts b/frontend/src/tests/e2e/canisters.spec.ts
new file mode 100644
index 00000000000..c6fc6fc2397
--- /dev/null
+++ b/frontend/src/tests/e2e/canisters.spec.ts
@@ -0,0 +1,61 @@
+import { AppPo } from "$tests/page-objects/App.page-object";
+import { PlaywrightPageObjectElement } from "$tests/page-objects/playwright.page-object";
+import { signInWithNewUser, step } from "$tests/utils/e2e.test-utils";
+import { expect, test } from "@playwright/test";
+
+test("Test canisters", async ({ page, context }) => {
+  await page.goto("/");
+  await expect(page).toHaveTitle("My Tokens / NNS Dapp");
+  await signInWithNewUser({ page, context });
+
+  const pageElement = PlaywrightPageObjectElement.fromPage(page);
+  const appPo = new AppPo(pageElement);
+
+  step("Get some ICP");
+  await appPo.getIcpTokens(10);
+
+  step("Create a canister");
+  const canisterName = "MyCanister";
+  await appPo.goToCanisters();
+  const canistersPo = appPo.getCanistersPo();
+  await canistersPo.createCanister({
+    name: canisterName,
+    icpAmount: "1",
+  });
+
+  step("Rename canister");
+  const canisterCards = await canistersPo.getCanisterCardPos();
+  expect(canisterCards).toHaveLength(1);
+  const canisterCard = canisterCards[0];
+  expect(await canisterCard.getCanisterName()).toBe(canisterName);
+  await canisterCard.click();
+
+  const newCanisterName = "MyCanister2";
+  const canisterDetail = appPo.getCanisterDetailPo();
+  await canisterDetail.clickRename();
+  await canisterDetail.renameCanister(newCanisterName);
+
+  step("Top up canister");
+  await canisterDetail.addCycles({ icpAmount: "2" });
+
+  step("Verify name");
+  await appPo.goBack();
+  expect(await canisterCard.getCanisterName()).toBe(newCanisterName);
+
+  step("Check transaction descriptions");
+  await appPo.goToNnsMainAccountWallet();
+  const transactionList = appPo
+    .getWalletPo()
+    .getNnsWalletPo()
+    .getTransactionListPo();
+  await transactionList.waitForLoaded();
+  const transactions = await transactionList.getTransactionCardPos();
+  expect(await Promise.all(transactions.map((tx) => tx.getHeadline()))).toEqual(
+    ["Top-up Canister", "Create Canister", "Received"]
+  );
+  expect(await Promise.all(transactions.map((tx) => tx.getAmount()))).toEqual([
+    "-2.0001",
+    "-1.0001",
+    "+10.00",
+  ]);
+});
diff --git a/frontend/src/tests/e2e/merge-neurons.spec.ts b/frontend/src/tests/e2e/merge-neurons.spec.ts
index a833a49f158..2ff9a41a7ae 100644
--- a/frontend/src/tests/e2e/merge-neurons.spec.ts
+++ b/frontend/src/tests/e2e/merge-neurons.spec.ts
@@ -76,18 +76,7 @@ test("Test merge neurons", async ({ page, context }) => {
   // Reload the page in case we would only know the neuron because it was still
   // in the store from before.
   await page.goto("/");
-  await appPo
-    .getTokensPo()
-    .getTokensPagePo()
-    .getTokensTable()
-    .getRowByName("Internet Computer")
-    .click();
-  await appPo
-    .getAccountsPo()
-    .getNnsAccountsPo()
-    .getTokensTablePo()
-    .getRowByName("Main")
-    .click();
+  await appPo.goToNnsMainAccountWallet();
   const transactionList = appPo
     .getWalletPo()
     .getNnsWalletPo()
diff --git a/frontend/src/tests/page-objects/AddCyclesModal.page-object.ts b/frontend/src/tests/page-objects/AddCyclesModal.page-object.ts
new file mode 100644
index 00000000000..0511558b263
--- /dev/null
+++ b/frontend/src/tests/page-objects/AddCyclesModal.page-object.ts
@@ -0,0 +1,38 @@
+import { ConfirmCyclesCanisterPo } from "$tests/page-objects/ConfirmCyclesCanister.page-object";
+import { ModalPo } from "$tests/page-objects/Modal.page-object";
+import { SelectCyclesCanisterPo } from "$tests/page-objects/SelectCyclesCanister.page-object";
+import type { PageObjectElement } from "$tests/types/page-object.types";
+
+export class AddCyclesModalPo extends ModalPo {
+  private static readonly TID = "add-cycles-modal-component";
+
+  static under(element: PageObjectElement): AddCyclesModalPo {
+    return new AddCyclesModalPo(element.byTestId(AddCyclesModalPo.TID));
+  }
+
+  getSelectCyclesCanisterPo(): SelectCyclesCanisterPo {
+    return SelectCyclesCanisterPo.under(this.root);
+  }
+
+  getConfirmCyclesCanisterPo(): ConfirmCyclesCanisterPo {
+    return ConfirmCyclesCanisterPo.under(this.root);
+  }
+
+  enterIcpAmount(amount: string): Promise<void> {
+    return this.getSelectCyclesCanisterPo().enterIcpAmount(amount);
+  }
+
+  clickReview(): Promise<void> {
+    return this.getSelectCyclesCanisterPo().clickSubmit();
+  }
+
+  clickConfirm(): Promise<void> {
+    return this.getConfirmCyclesCanisterPo().clickConfirm();
+  }
+
+  async addCycles({ icpAmount }: { icpAmount: string }): Promise<void> {
+    await this.enterIcpAmount(icpAmount);
+    await this.clickReview();
+    await this.clickConfirm();
+  }
+}
diff --git a/frontend/src/tests/page-objects/App.page-object.ts b/frontend/src/tests/page-objects/App.page-object.ts
index c1c15d5ce20..d9db0cb8b96 100644
--- a/frontend/src/tests/page-objects/App.page-object.ts
+++ b/frontend/src/tests/page-objects/App.page-object.ts
@@ -3,6 +3,8 @@ import { AccountsPo } from "$tests/page-objects/Accounts.page-object";
 import { BackdropPo } from "$tests/page-objects/Backdrop.page-object";
 import { BusyScreenPo } from "$tests/page-objects/BusyScreen.page-object";
 import type { ButtonPo } from "$tests/page-objects/Button.page-object";
+import { CanisterDetailPo } from "$tests/page-objects/CanisterDetail.page-object";
+import { CanistersPo } from "$tests/page-objects/Canisters.page-object";
 import { LaunchpadPo } from "$tests/page-objects/Launchpad.page-object";
 import { MenuItemsPo } from "$tests/page-objects/MenuItems.page-object";
 import { NeuronDetailPo } from "$tests/page-objects/NeuronDetail.page-object";
@@ -67,6 +69,14 @@ export class AppPo extends BasePageObject {
     return ProjectDetailPo.under(this.root);
   }
 
+  getCanistersPo(): CanistersPo {
+    return CanistersPo.under(this.root);
+  }
+
+  getCanisterDetailPo(): CanisterDetailPo {
+    return CanisterDetailPo.under(this.root);
+  }
+
   getMenuItemsPo(): MenuItemsPo {
     return MenuItemsPo.under(this.root);
   }
@@ -112,6 +122,20 @@ export class AppPo extends BasePageObject {
     await this.getBackdropPo().waitForAbsent();
   }
 
+  async goToNnsMainAccountWallet(): Promise<void> {
+    await this.goToAccounts();
+    await this.getTokensPo()
+      .getTokensPagePo()
+      .getTokensTable()
+      .getRowByName("Internet Computer")
+      .click();
+    await this.getAccountsPo()
+      .getNnsAccountsPo()
+      .getTokensTablePo()
+      .getRowByName("Main")
+      .click();
+  }
+
   async goToNeurons(): Promise<void> {
     await this.openMenu();
     await this.getMenuItemsPo().clickNeuronStaking();
@@ -142,6 +166,13 @@ export class AppPo extends BasePageObject {
     await this.getBackdropPo().waitForAbsent();
   }
 
+  async goToCanisters(): Promise<void> {
+    await this.openMenu();
+    await this.getMenuItemsPo().clickCanisters();
+    // Menu closes automatically.
+    await this.getBackdropPo().waitForAbsent();
+  }
+
   async getSnsTokens(params: { amount: number; name: string }): Promise<void> {
     await this.openMenu();
     await this.getMenuItemsPo().getGetTokensPo().getSnsTokens(params);
diff --git a/frontend/src/tests/page-objects/CanisterCard.page-object.ts b/frontend/src/tests/page-objects/CanisterCard.page-object.ts
new file mode 100644
index 00000000000..6cb39add23e
--- /dev/null
+++ b/frontend/src/tests/page-objects/CanisterCard.page-object.ts
@@ -0,0 +1,20 @@
+import { CardPo } from "$tests/page-objects/Card.page-object";
+import type { PageObjectElement } from "$tests/types/page-object.types";
+
+export class CanisterCardPo extends CardPo {
+  private static readonly TID = "canister-card";
+
+  static async allUnder(element: PageObjectElement): Promise<CanisterCardPo[]> {
+    return Array.from(await element.allByTestId(CanisterCardPo.TID)).map(
+      (el) => new CanisterCardPo(el)
+    );
+  }
+
+  static under(element: PageObjectElement): CanisterCardPo {
+    return new CanisterCardPo(element.byTestId(CanisterCardPo.TID));
+  }
+
+  async getCanisterName(): Promise<string> {
+    return (await this.getText("canister-card-title-component")).trim();
+  }
+}
diff --git a/frontend/src/tests/page-objects/CanisterDetail.page-object.ts b/frontend/src/tests/page-objects/CanisterDetail.page-object.ts
index 07bf8841fb9..811daa6821c 100644
--- a/frontend/src/tests/page-objects/CanisterDetail.page-object.ts
+++ b/frontend/src/tests/page-objects/CanisterDetail.page-object.ts
@@ -1,3 +1,4 @@
+import { AddCyclesModalPo } from "$tests/page-objects/AddCyclesModal.page-object";
 import { BasePageObject } from "$tests/page-objects/base.page-object";
 import type { PageObjectElement } from "$tests/types/page-object.types";
 import type { ButtonPo } from "./Button.page-object";
@@ -15,6 +16,10 @@ export class CanisterDetailPo extends BasePageObject {
     return this.getButton("rename-canister-button-component");
   }
 
+  getAddCyclesButtonPo(): ButtonPo {
+    return this.getButton("add-cycles-button");
+  }
+
   clickRename(): Promise<void> {
     return this.getRenameButtonPo().click();
   }
@@ -23,6 +28,10 @@ export class CanisterDetailPo extends BasePageObject {
     return RenameCanisterModalPo.under(this.root);
   }
 
+  getAddCyclesModalPo(): AddCyclesModalPo {
+    return AddCyclesModalPo.under(this.root);
+  }
+
   async renameCanister(newName: string): Promise<void> {
     await this.getRenameCanisterModalPo().rename(newName);
   }
@@ -42,4 +51,11 @@ export class CanisterDetailPo extends BasePageObject {
   async hasSubtitle(): Promise<boolean> {
     return this.getCanisterPageHeading().hasSubtitle();
   }
+
+  async addCycles({ icpAmount }: { icpAmount: string }): Promise<void> {
+    await this.getAddCyclesButtonPo().click();
+    const modal = this.getAddCyclesModalPo();
+    await modal.addCycles({ icpAmount });
+    await modal.waitForClosed();
+  }
 }
diff --git a/frontend/src/tests/page-objects/Canisters.page-object.ts b/frontend/src/tests/page-objects/Canisters.page-object.ts
new file mode 100644
index 00000000000..103fad943d7
--- /dev/null
+++ b/frontend/src/tests/page-objects/Canisters.page-object.ts
@@ -0,0 +1,37 @@
+import { CanisterCardPo } from "$tests/page-objects/CanisterCard.page-object";
+import { CreateCanisterModalPo } from "$tests/page-objects/CreateCanisterModal.page-object";
+import { BasePageObject } from "$tests/page-objects/base.page-object";
+import type { PageObjectElement } from "$tests/types/page-object.types";
+
+export class CanistersPo extends BasePageObject {
+  private static readonly TID = "canisters-component";
+
+  static under(element: PageObjectElement): CanistersPo {
+    return new CanistersPo(element.byTestId(CanistersPo.TID));
+  }
+
+  getCanisterCardPos(): Promise<CanisterCardPo[]> {
+    return CanisterCardPo.allUnder(this.root);
+  }
+
+  getCreateCanisterModalPo(): CreateCanisterModalPo {
+    return CreateCanisterModalPo.under(this.root);
+  }
+
+  clickCreate(): Promise<void> {
+    return this.click("create-canister-button");
+  }
+
+  async createCanister({
+    name,
+    icpAmount,
+  }: {
+    name: string;
+    icpAmount: string;
+  }): Promise<void> {
+    await this.clickCreate();
+    const modal = this.getCreateCanisterModalPo();
+    await modal.createCanister({ name, icpAmount });
+    await modal.waitForClosed();
+  }
+}
diff --git a/frontend/src/tests/page-objects/ConfirmCyclesCanister.page-object.ts b/frontend/src/tests/page-objects/ConfirmCyclesCanister.page-object.ts
new file mode 100644
index 00000000000..bca40b3250d
--- /dev/null
+++ b/frontend/src/tests/page-objects/ConfirmCyclesCanister.page-object.ts
@@ -0,0 +1,16 @@
+import { BasePageObject } from "$tests/page-objects/base.page-object";
+import type { PageObjectElement } from "$tests/types/page-object.types";
+
+export class ConfirmCyclesCanisterPo extends BasePageObject {
+  private static readonly TID = "confirm-cycles-canister-screen";
+
+  static under(element: PageObjectElement): ConfirmCyclesCanisterPo {
+    return new ConfirmCyclesCanisterPo(
+      element.byTestId(ConfirmCyclesCanisterPo.TID)
+    );
+  }
+
+  clickConfirm(): Promise<void> {
+    return this.click("confirm-cycles-canister-button");
+  }
+}
diff --git a/frontend/src/tests/page-objects/CreateCanisterModal.page-object.ts b/frontend/src/tests/page-objects/CreateCanisterModal.page-object.ts
new file mode 100644
index 00000000000..b2a9eb6ac00
--- /dev/null
+++ b/frontend/src/tests/page-objects/CreateCanisterModal.page-object.ts
@@ -0,0 +1,64 @@
+import { ConfirmCyclesCanisterPo } from "$tests/page-objects/ConfirmCyclesCanister.page-object";
+import { ModalPo } from "$tests/page-objects/Modal.page-object";
+import { SelectCyclesCanisterPo } from "$tests/page-objects/SelectCyclesCanister.page-object";
+import { TextInputFormPo } from "$tests/page-objects/TextInputForm.page-object";
+import type { PageObjectElement } from "$tests/types/page-object.types";
+
+export class CreateCanisterModalPo extends ModalPo {
+  private static readonly TID = "create-canister-modal-component";
+
+  static under(element: PageObjectElement): CreateCanisterModalPo {
+    return new CreateCanisterModalPo(
+      element.byTestId(CreateCanisterModalPo.TID)
+    );
+  }
+
+  getTextInputFormPo(): TextInputFormPo {
+    return TextInputFormPo.under({
+      element: this.root,
+      testId: "create-canister-name-form",
+    });
+  }
+
+  getSelectCyclesCanisterPo(): SelectCyclesCanisterPo {
+    return SelectCyclesCanisterPo.under(this.root);
+  }
+
+  getConfirmCyclesCanisterPo(): ConfirmCyclesCanisterPo {
+    return ConfirmCyclesCanisterPo.under(this.root);
+  }
+
+  enterName(name: string): Promise<void> {
+    return this.getTextInputFormPo().enterText(name);
+  }
+
+  clickNext(): Promise<void> {
+    return this.getTextInputFormPo().clickSubmitButton();
+  }
+
+  enterIcpAmount(amount: string): Promise<void> {
+    return this.getSelectCyclesCanisterPo().enterIcpAmount(amount);
+  }
+
+  clickReview(): Promise<void> {
+    return this.getSelectCyclesCanisterPo().clickSubmit();
+  }
+
+  clickConfirm(): Promise<void> {
+    return this.getConfirmCyclesCanisterPo().clickConfirm();
+  }
+
+  async createCanister({
+    name,
+    icpAmount,
+  }: {
+    name: string;
+    icpAmount: string;
+  }): Promise<void> {
+    await this.enterName(name);
+    await this.clickNext();
+    await this.enterIcpAmount(icpAmount);
+    await this.clickReview();
+    await this.clickConfirm();
+  }
+}
diff --git a/frontend/src/tests/page-objects/MenuItems.page-object.ts b/frontend/src/tests/page-objects/MenuItems.page-object.ts
index 9463c3f9333..80f8bbbe815 100644
--- a/frontend/src/tests/page-objects/MenuItems.page-object.ts
+++ b/frontend/src/tests/page-objects/MenuItems.page-object.ts
@@ -25,6 +25,10 @@ export class MenuItemsPo extends BasePageObject {
     return this.click("menuitem-launchpad");
   }
 
+  clickCanisters(): Promise<void> {
+    return this.click("menuitem-canisters");
+  }
+
   getGetTokensPo(): GetTokensPo {
     return GetTokensPo.under(this.root);
   }
diff --git a/frontend/src/tests/page-objects/SelectCyclesCanister.page-object.ts b/frontend/src/tests/page-objects/SelectCyclesCanister.page-object.ts
new file mode 100644
index 00000000000..b8792b55d20
--- /dev/null
+++ b/frontend/src/tests/page-objects/SelectCyclesCanister.page-object.ts
@@ -0,0 +1,20 @@
+import { BasePageObject } from "$tests/page-objects/base.page-object";
+import type { PageObjectElement } from "$tests/types/page-object.types";
+
+export class SelectCyclesCanisterPo extends BasePageObject {
+  private static readonly TID = "select-cycles-screen";
+
+  static under(element: PageObjectElement): SelectCyclesCanisterPo {
+    return new SelectCyclesCanisterPo(
+      element.byTestId(SelectCyclesCanisterPo.TID)
+    );
+  }
+
+  enterIcpAmount(amount: string): Promise<void> {
+    return this.getTextInput("select-cycles-icp-input").typeText(amount);
+  }
+
+  clickSubmit(): Promise<void> {
+    return this.click("select-cycles-button");
+  }
+}
diff --git a/frontend/src/tests/page-objects/playwright.page-object.ts b/frontend/src/tests/page-objects/playwright.page-object.ts
index 307521714ee..5d47cff5080 100644
--- a/frontend/src/tests/page-objects/playwright.page-object.ts
+++ b/frontend/src/tests/page-objects/playwright.page-object.ts
@@ -116,7 +116,7 @@ export class PlaywrightPageObjectElement implements PageObjectElement {
   }
 
   typeText(text: string): Promise<void> {
-    return this.locator.type(text);
+    return this.locator.fill(text);
   }
 
   async selectOption(text: string): Promise<void> {