Playwright Demo

playwright-demo.ipynb

{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "d376c69c-b28e-4a5f-8f04-af78e00f7091",
   "metadata": {},
   "outputs": [],
   "source": [
    "# To install dependencies:\n",
    "#     $ pip install playwright\n",
    "#     $ playwright install\n",
    "# If using WSL - follow https://medium.com/@matthewkleinsmith/headful-playwright-with-wsl-4bf697a44ecf"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "7727e15e-da17-4c26-8bdb-6c289b2eea3b",
   "metadata": {},
   "source": [
    "Let's first start with how to generate playwright code ..."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "be112e03-ad65-4081-85d6-935fdc3c8d31",
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "!playwright codegen"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "49c8e5d9-965a-4e4d-a583-3912d40255b2",
   "metadata": {},
   "source": [
    "# Try it ourselves"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "82afa717-4c78-459c-8e23-5e5e36fce465",
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "from playwright.async_api import async_playwright\n",
    "\n",
    "p = await async_playwright().start()  # Instead of a context manager ..."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "44a3d84e-5ad5-428e-a5b0-bce8956e7996",
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "# Launch a chrome browser\n",
    "browser = await p.chromium.launch(headless=False)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "c629d9d3-5731-49e5-85e6-fb1bbf586ab0",
   "metadata": {},
   "outputs": [],
   "source": [
    "# Create a new page/browser-window for chrome\n",
    "page = await browser.new_page()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "e6b4976e-16c6-4e0e-83a6-84a20d1c6052",
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "# Open a URL ---- https://playwright.dev/python/docs/api/class-page#page-goto\n",
    "await page.goto(\"http://corridorplatforms.com\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "40f84b72-c046-4a80-ac71-e4d13adc30ad",
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "# Get the page title\n",
    "print(await page.title())"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "15ed5cb4-1ff3-4d91-8779-4e4ffa9ef68a",
   "metadata": {
    "execution": {
     "iopub.execute_input": "2023-08-19T19:09:50.083664Z",
     "iopub.status.busy": "2023-08-19T19:09:50.082974Z",
     "iopub.status.idle": "2023-08-19T19:09:50.101716Z",
     "shell.execute_reply": "2023-08-19T19:09:50.100490Z",
     "shell.execute_reply.started": "2023-08-19T19:09:50.083635Z"
    },
    "tags": []
   },
   "source": [
    "#### Find a DOM element\n",
    "<https://playwright.dev/python/docs/api/class-locator>\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "b6c143dd-8211-4009-8d68-ca33afb76570",
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "elems = page.locator('text=Facilitate Innovation')  # Gives 2 elements\n",
    "await elems.all()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "7e6ce125-6a5a-4201-9a9f-5a954dd69e91",
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "elems = page.locator('text=Facilitate Innovation').nth(0)  # Get the first\n",
    "await elems.all() "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "232daeac-3483-4a29-96dd-e6b67232e19e",
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "elems = page.locator('.corridorMissionCard-item >> text=Facilitate Innovation')  # Mix it with a CSS selector\n",
    "await elems.all()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "a72031c7-c62b-40c6-9380-72ec5acff07d",
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "elems = page.locator('//*[contains(@class, \"corridorMissionCard-item\")] >> text=Facilitate Innovation')  # Mix it with a XPATH selector\n",
    "await elems.all()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "186c68f1-d429-4b45-b6de-a652d489f7b7",
   "metadata": {},
   "source": [
    "#### Perform an action - like hovering on the card\n",
    "<https://playwright.dev/python/docs/api/class-locator#locator-hover>\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "e0755aa0-7354-4292-937b-c975a2bcd26b",
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "elems = page.locator('text=Facilitate Innovation').nth(0)\n",
    "await elems.hover()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "ee9cb3ae-af17-429e-baec-cac41c671902",
   "metadata": {
    "execution": {
     "iopub.execute_input": "2023-08-19T19:11:57.484929Z",
     "iopub.status.busy": "2023-08-19T19:11:57.484640Z",
     "iopub.status.idle": "2023-08-19T19:11:57.530691Z",
     "shell.execute_reply": "2023-08-19T19:11:57.522973Z",
     "shell.execute_reply.started": "2023-08-19T19:11:57.484911Z"
    },
    "tags": []
   },
   "source": [
    "### Using layout selectors\n",
    "Let's try to find another card using layout selectors\n",
    "<https://playwright.dev/python/docs/selectors#selecting-elements-based-on-layout>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "935fd3ba-66a7-4713-9d7f-03ea34591fa1",
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "elems = page.locator(':text(\"Connected Design\")').nth(0)\n",
    "print(await elems.all())\n",
    "await elems.is_visible()    "
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "739d5d33-ec0e-4f77-a9cf-ddad23321335",
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "elems = page.locator(':text(\"Learn more\"):near(:text(\"Connected Design\"))')\n",
    "print(await elems.all())\n",
    "await elems.is_visible()"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "e384296c-0c3f-4e93-a258-2a5b07c9f5c3",
   "metadata": {},
   "source": [
    "#### Get a screenshot\n",
    "<https://playwright.dev/python/docs/screenshots#element-screenshot>\n"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "16c68e9e-908f-4a83-bce8-f84b91cdf29e",
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "# take a screenshot\n",
    "image = await page.screenshot(path='screenie.png')"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "a0528a08-2874-4211-b637-9a92b18405ad",
   "metadata": {
    "tags": []
   },
   "source": [
    "#### Waiting for the right time - Actionability\n",
    "\n",
    "Let's go to a heavy page which is dynamic.\n",
    "\n",
    "When can we start clicking on that page ?  \n",
    "We want to wait until the entire page is loaded ...\n",
    " - Maybe when all network activity completes ?\n",
    " - Maybe when the Load event gets fired ?\n",
    "\n",
    "<https://playwright.dev/python/docs/api/class-page#page-goto-option-wait-until>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "e7ec3390-ee63-4a8d-bccf-86f649156346",
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "# goto hotstar - which is a dynamic page\n",
    "await page.goto(\"http://hotstar.com\", wait_until='networkidle')\n",
    "# wait_until='networkidle': consider operation to be finished when there are\n",
    "#                           no network connections for at least 500 ms\n"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "372644c6-cd6b-47c3-b144-98871388bfcf",
   "metadata": {
    "execution": {
     "iopub.execute_input": "2023-08-19T19:26:01.422665Z",
     "iopub.status.busy": "2023-08-19T19:26:01.421957Z",
     "iopub.status.idle": "2023-08-19T19:26:01.441748Z",
     "shell.execute_reply": "2023-08-19T19:26:01.440185Z",
     "shell.execute_reply.started": "2023-08-19T19:26:01.422636Z"
    },
    "tags": []
   },
   "source": [
    "You can wait for the previous command to complete  \n",
    "Or when running the next command wait to ensure that the action can be performed\n",
    "<https://playwright.dev/python/docs/actionability>"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "99895d83-b74a-46c0-a37e-9e67f4d015b3",
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "# goto hotstar and click on the \"Sports\" icon\n",
    "\n",
    "await page.goto(\"http://hotstar.com\", wait_until='commit')\n",
    "# wait_until='commit': consider operation to be finished when network\n",
    "#                      response is received and the document started loading.\n",
    "print('goto completed')\n",
    "\n",
    "\n",
    "# Even if we perform our clicks too early\n",
    "# Playwright will ensure it waits for the event to be \"ready\"\n",
    "await page.click('.icon-sports-line')\n",
    "print('click completed')"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "3e2dbbb6-6fc6-4ac9-85dc-ab9bc0c77298",
   "metadata": {},
   "source": [
    "#### Tracing\n",
    "\n",
    "While playwright is doing all this - you can also enable tracing to see what is exactly going on"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "d69e9a8a-1c11-4eef-aecc-764a70957d7c",
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "# Close existing page\n",
    "await page.close()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "f18405fe-e023-4535-b808-e49d8d4a509a",
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "# Start a tracing recording\n",
    "context = await browser.new_context()\n",
    "await context.tracing.start(screenshots=True, snapshots=True, sources=True)\n",
    "\n",
    "page = await context.new_page()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "f67fb9b9-1c52-43a6-8e84-0d29ad9ee984",
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "# goto hotstar and click on the \"Sports\" icon\n",
    "await page.goto(\"http://hotstar.com\", wait_until='commit')\n",
    "print('goto completed')\n",
    "\n",
    "await page.click('.icon-sports-line')\n",
    "print('click completed')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "b1c80f56-f394-4fd3-9207-5aa03c1c6627",
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "# Stop the tracing\n",
    "await context.tracing.stop(path=\"trace.zip\")"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "5733e47e-5f61-42ac-91cf-e0371d796e4b",
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "# Let's open this trace\n",
    "!playwright show-trace trace.zip"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "99b3911c-2918-4d2a-af8d-91814353edcd",
   "metadata": {},
   "source": [
    "#### Low level functions are also available\n",
    "\n",
    "High level functions like: `goto()`, `click()`, `fill()` keep you sane  \n",
    "But low level functions let you remain a power user when you need it"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "1b91e2c3-ba88-4b8b-b73b-f128df119f8a",
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "# Let's open google.com\n",
    "await page.goto(\"http://google.com\")\n",
    "\n",
    "# Keyboard events - type, press\n",
    "await page.keyboard.type('do a barrel roll')\n",
    "await page.keyboard.press('Enter')"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "853e2d7f-1ae5-4545-8dff-847a0b23870f",
   "metadata": {
    "tags": []
   },
   "outputs": [],
   "source": [
    "elems = page.locator('text=Do a barrel roll trick 20 times?').nth(0)\n",
    "print(await elems.is_visible())\n",
    "elems = page.locator('text=Do a barrel roll trick 20 times?').nth(0)\n",
    "await elems.click()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "b7f8a913-2647-4993-8afa-310fea1c776c",
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "61b5a55b-02db-4fd9-b86f-4a5daf310772",
   "metadata": {},
   "outputs": [],
   "source": []
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "5db02591-06af-48cc-9194-589cc9062ed1",
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3 (ipykernel)",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.7.16"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}