### Adding Selene and Installing in One Command

Source: https://github.com/yashaka/selene/blob/master/docs/selene-quick-start-tutorial.md

Shows a shortcut command to add the Selene dependency and install all project dependencies simultaneously.

```bash
> poetry add selene --allow-prereleases
```

--------------------------------

### Poetry Install and Environment Listing

Source: https://github.com/yashaka/selene/blob/master/docs/selene-quick-start-tutorial.md

Demonstrates the commands to install project dependencies using Poetry and to list the full path of the activated virtual environment.

```bash
> poetry install
Creating virtualenv selene-quick-start-py3.7 in /Users/yashaka/Library/Caches/pypoetry/virtualenvs
Updating dependencies
Resolving dependencies... (6.5s)

Writing lock file
...
```

```bash
> poetry env list --full-path
/Users/yashaka/Library/Caches/pypoetry/virtualenvs/selene-quick-start-9GqV_4P_-py3.7 (Activated)
```

--------------------------------

### Installing Project Dependencies with Poetry

Source: https://github.com/yashaka/selene/blob/master/docs/selene-quick-start-tutorial.md

Provides the command to install all project dependencies defined in pyproject.toml using Poetry.

```bash
> poetry install
```

--------------------------------

### Python Version Check and Management

Source: https://github.com/yashaka/selene/blob/master/docs/selene-quick-start-tutorial.md

Demonstrates how to install a specific Python version using pyenv, set it as the global version, and verify the installation.

```bash
> pyenv install 3.7.3
> pyenv global 3.7.3
> python --version
Python 3.7.3
```

--------------------------------

### Selene Element Interaction Example

Source: https://github.com/yashaka/selene/blob/master/docs/selene-quick-start-tutorial.md

Demonstrates a common Selene pattern for interacting with elements: finding an element, asserting its state, typing text, and pressing Enter.

```python
browser.element(by.name('q')).should(be.blank) \
    .type('selenium').press_enter()

```

--------------------------------

### Poetry Project Creation and Navigation

Source: https://github.com/yashaka/selene/blob/master/docs/selene-quick-start-tutorial.md

Shows the commands to create a new project using Poetry, create a package, and navigate into the project directory.

```bash
> poetry new selene-quick-start
Created package selene_quick_start in selene-quick-start
> cd selene-quick-start
> ls
README.rst	pyproject.toml	selene_quick_start	tests
```

--------------------------------

### Adding Selene Dependency with Poetry

Source: https://github.com/yashaka/selene/blob/master/docs/selene-quick-start-tutorial.md

Demonstrates how to add the Selene library as a project dependency using Poetry, including allowing pre-releases.

```toml
# ...
[tool.poetry.dependencies]
python = "^3.7"
selene = {version = "^2.*", allow-prereleases = true}

[tool.poetry.dev-dependencies]
pytest = "^3.0"
# ...
```

--------------------------------

### Selene Element Assertion Examples

Source: https://github.com/yashaka/selene/blob/master/docs/selene-quick-start-tutorial.md

Illustrates how to use Selene's `should` method with conditions from `have` and `be` modules to assert element states.

```python
browser.element('[type=submit]').should(have.exact_text('Google Search'))
```

```python
browser.element(by.name('q')).should(be.blank)
```

--------------------------------

### Poetry Project Configuration (pyproject.toml)

Source: https://github.com/yashaka/selene/blob/master/docs/selene-quick-start-tutorial.md

Displays the default pyproject.toml file generated by Poetry, including project metadata, dependencies, and build system configuration.

```toml
[tool.poetry]
name = "selene-quick-start"
version = "0.1.0"
description = ""
authors = ["yashaka <yashaka@gmail.com>"]

[tool.poetry.dependencies]
python = "^3.7"

[tool.poetry.dev-dependencies]
pytest = "^3.0"

[build-system]
requires = ["poetry>=1.0.0"]
build-backend = "poetry.masonry.api"
```

--------------------------------

### Selene API Imports

Source: https://github.com/yashaka/selene/blob/master/docs/selene-quick-start-tutorial.md

Shows the basic imports required to start using the Selene API in Python code.

```python
from selene import browser, by, be, have

# ...

```

--------------------------------

### Setting Local Python Version with Pyenv

Source: https://github.com/yashaka/selene/blob/master/docs/selene-quick-start-tutorial.md

Illustrates how to set a local Python version for the current directory using pyenv and verify it.

```bash
> pyenv local 3.7.3
> python -V
Python 3.7.3
```

--------------------------------

### Selene Project Structure Overview

Source: https://github.com/yashaka/selene/blob/master/docs/selene-quick-start-tutorial.md

Provides a textual representation of the typical project structure created by Poetry for a Selene project.

```text
selene-quick-start
├── .python-version
├── pyproject.toml
├── README.rst
├── selene_quick_start
│   └── __init__.py
└── tests
    ├── __init__.py
    └── test_poetry_demo.py
```

--------------------------------

### Project Version Definition in __init__.py

Source: https://github.com/yashaka/selene/blob/master/docs/selene-quick-start-tutorial.md

Shows how the project's version is defined within the __init__.py file of the main module.

```python
from selene_quick_start import __version__

def test_version():
    assert __version__ == '0.1.0'
```

--------------------------------

### Install and Setup Poetry Environment

Source: https://github.com/yashaka/selene/blob/master/CONTRIBUTING.md

Steps to install Poetry and set up the project's virtual environment for development.

```shell
pip install poetry
cd selene
poetry install
poetry shell
```

--------------------------------

### Selene Element Locator Assignment

Source: https://github.com/yashaka/selene/blob/master/docs/selene-quick-start-tutorial.md

This Python example shows how to assign a Selene element locator to a variable for reusability and improved code readability. It demonstrates finding an element by its name attribute.

```python

query = browser.element(by.name('q'))

 
```

--------------------------------

### Test Google Search with Selene

Source: https://github.com/yashaka/selene/blob/master/docs/selene-quick-start-tutorial.md

This Python test case demonstrates how to use Selene to open Google, search for 'python selene', assert the number of results, click the first result, and verify the page title.

```python
from selene import browser, by, be, have

import pytest


query = browser.element(by.name('q'))
results = browser.all('#rso>div')
first_result_header = results.first.element('h3')


def test_finds_selene():
    browser.open('https://google.com/ncr')
    query.should(be.blank)

    query.type('python selene').press_enter()
    results.should(have.size_greater_than_or_equal(6))
    results.first.should(have.text('selene'))

    first_result_header.click()
    browser.should(have.title_containing('selene'))
```

--------------------------------

### Running Selene Tests

Source: https://github.com/yashaka/selene/blob/master/docs/selene-quick-start-tutorial.md

These shell commands demonstrate how to execute Selene tests using pytest. It includes running tests via Poetry and directly using the pytest command.

```shell
> poetry run pytest tests/test_google.py
```

```shell
> poetry shell
> pytest tests/test_google.py
```

--------------------------------

### Run MkDocs Local Server

Source: https://github.com/yashaka/selene/blob/master/docs/contribution/to-documentation-guide.md

Starts the mkdocs local web server to preview the documentation website.

```bash
mkdocs serve
```

--------------------------------

### Install Selene with Poetry (Pre-release)

Source: https://github.com/yashaka/selene/blob/master/README.md

Guides users on setting up a new project with Poetry, specifying a local Python version with Pyenv, and adding the pre-release version of Selene.

```bash
poetry new my-tests-with-selene
cd my-tests-with-selene
pyenv local 3.8.13
poetry add selene --allow-prereleases
poetry install
```

--------------------------------

### Install Dependencies for Docs

Source: https://github.com/yashaka/selene/blob/master/docs/contribution/to-documentation-guide.md

Installs Selene with the necessary dependencies for documentation development.

```bash
poetry install --with docs
```

--------------------------------

### Install Selene from Source with Pip

Source: https://github.com/yashaka/selene/blob/master/README.md

Shows how to install Selene directly from its GitHub repository using pip.

```bash
pip install git+https://github.com/yashaka/selene.git
```

--------------------------------

### Quick Start: Google Search Automation

Source: https://github.com/yashaka/selene/blob/master/README.md

A basic example demonstrating how to use Selene to open Google, search for 'selenium', and assert that the results contain specific text.

```python
from selene import browser, be, have

browser.open('https://google.com/ncr')
browser.element('[name=q]').should(be.blank)
    .type('selenium').press_enter()
browser.all('#rso>div').should(have.size_greater_than(5))
    .first.should(have.text('Selenium automates browsers'))
```

--------------------------------

### Configure Browser Window Size with Selene

Source: https://github.com/yashaka/selene/blob/master/docs/selene-quick-start-tutorial.md

This Python code snippet shows how to configure the browser window width and height using Selene's configuration options. It also demonstrates how to apply these configurations using a pytest fixture.

```python
# ...
from selene import browser


# ...

    browser.config.window_width = 1024
    browser.config.window_height = 768

# ...


import pytest

# ...

@pytest.fixture(scope='function', autouse=True)
def setup():  # code inside this function (before yield) ...
              # will be executed before each test 
              # to ensure neededed config options
              # regardless of what might be changed
              # inside previous test


    browser.config.window_width = 1024
    browser.config.window_height = 768
    yield


def test_finds_selene():
    # ...

```

--------------------------------

### File Layout Example

Source: https://github.com/yashaka/selene/blob/master/docs/contribution/how-to-organize-docs-guide.md

Demonstrates a typical file and directory structure for documentation, showing how it maps to generated URLs.

```plain
📁 docs/
├── 📁 contribution/
    ├── 📄 to-source-code-guide.md
    └── 📄 code-conventions-guide.md
├── 📄 index.md
└── 📄 license.md
```

```plain
/contribution/to-source-code-guide/
/contribution/code-conventions-guide/
/
/license/
```

--------------------------------

### Python Code Example with Selene

Source: https://github.com/yashaka/selene/blob/master/docs/contribution/how-to-write-docs-guide.md

An example of using the Selene library in Python to automate browser interactions. It shows how to open a URL, find an element, type text, press enter, and assert conditions on search results.

```python
from selene import browser
from selene import by, be, have

browser.open('https://google.com/ncr')
browser.element(by.name('q')).should(be.blank)
.type('selenium').press_enter()
browser.all('.srg .g').should(have.size(10))
.first.should(have.text('Selenium automates browsers'))
```

--------------------------------

### Selene Google Search Test

Source: https://github.com/yashaka/selene/blob/master/docs/selene-quick-start-tutorial.md

This Python code snippet demonstrates how to use Selene to automate a Google search. It opens Google, searches for 'python selene', verifies the search results, and checks the page title.

```python
# selene-quick-start/tests/test_google.py

from selene import browser, by, be, have

import pytest


def test_finds_selene():

    browser.open('https://google.com/ncr')
    browser.element(by.name('q')).should(be.blank)

    browser.element(by.name('q')).type('python selene').press_enter()
    browser.all('#rso>div').should(have.size_greater_than_or_equal(6))
    browser.all('#rso>div').first.should(have.text('selene'))

    browser.all('#rso>div').first.element('h3').click()
    browser.should(have.title_containing('selene'))
```

--------------------------------

### Install Selene via Pip (Pre-release)

Source: https://github.com/yashaka/selene/blob/master/README.md

Provides the command to install the pre-release version of Selene using pip, recommended for new projects.

```bash
pip install selene --pre
```

--------------------------------

### Add MkDocs Material Theme

Source: https://github.com/yashaka/selene/blob/master/docs/contribution/documentation-for-project-tutorial.md

Installs the MkDocs Material theme, a popular and customizable theme for MkDocs, as a development dependency.

```plain
poetry add mkdocs-material@latest --group docs
```

--------------------------------

### Install Selene via Pip (Stable)

Source: https://github.com/yashaka/selene/blob/master/README.md

Provides the command to install the latest stable version of Selene using pip.

```bash
pip install selene
```

--------------------------------

### Markdown Links Examples

Source: https://github.com/yashaka/selene/blob/master/docs/contribution/how-to-write-docs-guide.md

Shows how to use reference-style links and inline-style links in Markdown, including definitions for reference links.

```markdown
[Selene][selene-github] is cool,  
especially with good [docs][home-docs].  
[I'm an inline-style link](https://t.me/selene_py_ru)

[selene-github]: https://github.com/yashaka/selene/
[home-docs]: ../index.md
```

--------------------------------

### Install Python 3.8.13 using Pyenv

Source: https://github.com/yashaka/selene/blob/master/README.md

Demonstrates how to install a specific Python version (3.8.13) using Pyenv, set it as the global version, and verify the installation.

```bash
pyenv install 3.8.13
pyenv global 3.8.13
python -V
```

--------------------------------

### MkDocs Configuration for Redirects

Source: https://github.com/yashaka/selene/blob/master/docs/contribution/to-documentation-guide.md

Example of mkdocs.yml configuration to manage redirects, with specific lines commented out for previewing Changelog and License pages on Windows.

```yaml
- redirects:
    redirect_maps:
      CONTRIBUTING.md: contribution/to-source-code-guide.md
      # CHANGELOG.md: changelog.md
      # LICENSE.md: license.md
```

--------------------------------

### Migration Refactoring Examples

Source: https://github.com/yashaka/selene/blob/master/README.md

Provides examples of common refactoring patterns needed when migrating from Selene v1.x to v2.x, including changes to conditions and method chaining.

```APIDOC
Migration Refactoring Examples:

Find & Replace All:
  - `(text('foo'))` to `(have.text('foo'))`
  - `(visible)` to `(be.visible)`

Smarter Find & Replace (with manual refactoring):
  - `.should(x, timeout=y)` to `.with_(timeout=y).should(x)`
  - `.should_not(be.*)` to `.should(be.not_.*)` or `.should(be.*.not_)
  - `.should_not(have.*)` to `.should(have.no.*)` or `.should(have.*.not_)
  - `.should_each(condition)` to `.should(condition.each)`

Add corresponding imports:
  `from selene import be, have`
```

--------------------------------

### Linting Markdown with markdownlint-cli2

Source: https://github.com/yashaka/selene/blob/master/docs/contribution/to-documentation-guide.md

This snippet demonstrates how to use the markdownlint-cli2 command-line interface for linting Markdown files. It requires Node.js to be installed.

```shell
npm install -g markdownlint-cli2
markdownlint-cli2 "**/*.md"
```

--------------------------------

### Markdown Emphasis Examples

Source: https://github.com/yashaka/selene/blob/master/docs/contribution/how-to-write-docs-guide.md

Demonstrates the usage of italics, bold, strikethrough, and highlighted text in Markdown.

```plain
I'm *italics* text.  
I'm **bold** text.  
I'm ~~strikethrough~~ text.  
I'm ==highlighted== text.
```

--------------------------------

### Markdown Lists Examples

Source: https://github.com/yashaka/selene/blob/master/docs/contribution/how-to-write-docs-guide.md

Illustrates the correct formatting for ordered and unordered lists, including nested items and paragraph indentation in Markdown.

```plain
1. First ordered list item
2. Another item
    - Unordered item
        - Nested item
3. Third item

    Blank line and four space indentation for paragraph.
    This line  
    was interrupted by two trailing spaces.
```

--------------------------------

### Environment and Package Versions

Source: https://github.com/yashaka/selene/blob/master/docs/faq/custom-user-profile-howto.md

Lists the versions of Python, Selene, Pytest, Selenium, and browser drivers used for the examples provided in this documentation.

```plain
python = "3.10"
selene = "2.0.0b17"
pytest = "7.2.1"
selenium = "4.8.2"

chromedriver = "110.0.5481"
geckodriver = "0.32.2"

Windows 10 x64 Version 22H2
Ubuntu 22.04.2 LTS (with snap-packaged Firefox)
VS Code 1.76
```

--------------------------------

### Selene Locator Example

Source: https://github.com/yashaka/selene/blob/master/docs/selene-for-page-objects-guide.md

Shows how Selene allows direct assignment of elements, abstracting away the underlying locator strategy. This leads to more concise code for interacting with web elements.

```python
query = browser.element(by.name('q'))
```

--------------------------------

### Example of Monkey Patching for Mobile Context

Source: https://github.com/yashaka/selene/blob/master/docs/faq/extending-selene-howto.md

Demonstrates how to extend Selene with custom commands like 'tap' and 'long_press' and a custom location strategy for mobile testing using a monkey patching approach.

```python
from selene import command
from selene.conditions import text
from selene.driver import Driver
from selene.locator import Locator
from selene.search import Search
from selene.webelement import WebElement


class MobileElement(WebElement):
    def tap(self):
        self.execute("tap", self.location)

    def long_press(self):
        self.execute("long_press", self.location)


def mobile_context(driver: Driver):
    return MobileElement(driver, Locator(lambda: driver.find_element(by='mobile', value='some_mobile_element')))


# Example usage:
# driver = Driver()
# mobile_element = mobile_context(driver)
# mobile_element.tap()
# mobile_element.long_press()

```

--------------------------------

### Chrome Custom Profile Setup

Source: https://github.com/yashaka/selene/blob/master/docs/faq/custom-user-profile-howto.md

Configures Selene to use a custom profile directory for Chrome. This involves setting the `user-data-dir` and `profile-directory` arguments for ChromeOptions. The example opens `chrome://version/` to display the active profile.

```python
from selene import browser
from selenium.webdriver import Chrome, ChromeOptions

browser_options = ChromeOptions()
browser_options.add_argument('user-data-dir=D:\_cache\Chrome\Fresh User Data')
browser_options.add_argument('profile-directory=Default')

browser.config.driver = Chrome(options=browser_options)

browser.open('chrome://version/')
browser.quit()
```

--------------------------------

### Firefox Custom Profile Setup

Source: https://github.com/yashaka/selene/blob/master/docs/faq/custom-user-profile-howto.md

Demonstrates how to configure Selene to use a specific profile for Firefox. This is achieved by adding the `-profile` argument followed by the profile path to FirefoxOptions. The example navigates to `about:profiles` to confirm the profile.

```python
from selene import browser
from selenium.webdriver import Firefox, FirefoxOptions

browser_options = FirefoxOptions()
browser_options.add_argument('-profile')
browser_options.add_argument('/home/user/snap/firefox/common/.mozilla/firefox/t2y46pn0.default')

browser.config.driver = Firefox(options=browser_options)

browser.open('about:profiles')
browser.quit()
```

--------------------------------

### Example Test Data Structure

Source: https://github.com/yashaka/selene/blob/master/docs/faq/custom-user-profile-howto.md

Illustrates a typical file structure for storing Chrome profiles relative to test files. This setup allows tests to be run from different locations without breaking the profile path configuration.

```plain
📁 tests/
├── 📁 test-data
    └── 📁 profiles
        ├── 📁 Default
        └── 📁 Profile 2
└── 📁 some-feature
    └── 📄 web_ui_tests.py
```

--------------------------------

### GitHub Actions Workflow for Deploying MkDocs with Poetry

Source: https://github.com/yashaka/selene/blob/master/docs/contribution/documentation-for-project-tutorial.md

A GitHub Actions workflow that automates the building and deployment of MkDocs documentation to GitHub Pages using Poetry for dependency management.

```yaml
name: Deploy Docs to Pages

env:
  # Specify Python version to quick change in the future
  # See: https://github.com/actions/setup-python/tree/main#available-versions-of-python
  PYTHON_VERSION: "3.7"


# Controls when the workflow will run
on:
  # Triggers the workflow on push events but only for the "main" branch
  # and docs related files (paths)
  push:
    branches: [ "main" ]
    paths:
      - ".github/workflows/deploy-mkdocs-poetry.ya?ml"
      - "mkdocs.ya?ml"
      - "poetry.lock"
      - "pyproject.toml"
      - "docs/**"

  # Allows you to run this workflow manually from the Actions tab
  workflow_dispatch:

# A workflow run is made up of one or more jobs that can run sequentially or in parallel
jobs:
  # This workflow contains two jobs called "build-docs" and "deploy-docs"

  # Build docs via MkDocs with poetry shell (environment)
  build-docs:
    # The type of runner that the job will run on
    runs-on: ubuntu-latest

    # Steps represent a sequence of tasks that will be executed as part of the job
    steps:
      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
      - name: Checkout repository
        uses: actions/checkout@v3

      - name: Install Python
        uses: actions/setup-python@v4
        with:
          python-version: ${{ env.PYTHON_VERSION }}

      - name: Install Poetry
        run: pip install poetry

      - name: Install Dependencies
        run: poetry install --no-root

      # Build MkDocs static files (in 'site' folder)
      - name: Build docs
        run: poetry run mkdocs build

      # upload the static files as an artifact
      - name: Upload static artifact (.zip)
        uses: actions/upload-pages-artifact@v1
        with:
          path: "site/"

  # Deploy docs job
  deploy-docs:
    # Add a dependency to the build job
    needs: build-docs

    # Grant GITHUB_TOKEN the permissions required to make a Pages deployment
    permissions:
      pages: write      # to deploy to Pages
      id-token: write   # to verify the deployment originates from an appropriate source

    # Deploy to the github-pages environment
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}

    # Specify runner + deployment step
    runs-on: ubuntu-latest
    steps:
      - name: Deploy docs to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v1
```

--------------------------------

### MkDocs Configuration

Source: https://github.com/yashaka/selene/blob/master/docs/contribution/documentation-for-project-tutorial.md

A basic configuration file for MkDocs, defining the site name, URL, navigation structure, theme, and plugins.

```yaml
site_name: Selene
site_url: https://hotenov.github.io/selene-with-docs/

nav:
  - Home: index.md
  - "Guides":
    - "Docs Setup": "guides/docs-setup.md"
  - About: about.md

theme:
  name: material
  favicon: img/favicon.ico

plugins:
- search
- autorefs
- mkdocstrings
```

--------------------------------

### Install and configure uBlock Origin extension

Source: https://github.com/yashaka/selene/blob/master/docs/faq/adding-chrome-extension-howto.md

This Python fixture configures the Selene browser to use the uBlock Origin Chrome extension. It specifies the extension path, opens the extensions page, interacts with the extension's card to ensure it's enabled, and navigates to the extension's dashboard to verify its installation.

```python
import pytest
from selene import browser, have, Element, be
from selene.core.locator import Locator
from selenium import webdriver

from my_project import resources


@pytest.fixture(autouse=True)
def browser_with_ublock():
    ublock_path = resources.path / 'chrome_extensions/uBlock-Origin.crx'
    # ublock_id a unique constant for uBlock Origin extension
    ublock_id = 'cjpalhdlnbpafiamejdnhcphjbkeiagm'
    options = webdriver.ChromeOptions()
    options.add_extension(ublock_path)
    browser.config.driver_options = options

    browser.open('chrome://extensions/')
    js = f'''return document.querySelector('body > extensions-manager')
    .shadowRoot.querySelector('#items-list')
    .shadowRoot.querySelector('#{ublock_id}')
    .shadowRoot.querySelector('#card')'''
    card = Element(
        Locator('ublock extension card', lambda: browser.execute_script(js)),
        browser.config,
    )
    # Specific behaviour for uBlock extension.
    # Initially it is enabled, then disabled, then enabled again.
    card.should(have.css_class('disabled')).should(have.css_class('enabled'))
    # You might want to increase timeout.
    # card.with_(timeout=browser.config.timeout*1.5).should(...).should(...)
    browser.open(f'chrome-extension://{ublock_id}/dashboard.html#about.html')
    browser.switch_to.frame(browser.element('iframe')())
    browser.element('#aboutNameVer').should(be.visible).should(
        have.text('uBlock Origin')
    )

    yield

```

--------------------------------

### Basic MkDocs Navigation Configuration

Source: https://github.com/yashaka/selene/blob/master/docs/contribution/how-to-organize-docs-guide.md

Illustrates a minimal configuration for the `nav` setting in `mkdocs.yml` to define the site's navigation menu.

```yaml
nav:
    - Home: 'index.md'
    - About: 'about.md'
```

--------------------------------

### Add MkDocs Dependency

Source: https://github.com/yashaka/selene/blob/master/docs/contribution/documentation-for-project-tutorial.md

Adds the MkDocs package to your project's development dependencies using Poetry.

```plain
poetry add mkdocs@latest --group docs
```

--------------------------------

### Activate Python Virtual Environment

Source: https://github.com/yashaka/selene/blob/master/docs/contribution/to-documentation-guide.md

Activates the Python virtual environment created by Poetry, allowing you to run project commands.

```bash
poetry shell
```

--------------------------------

### Copy Input Element Value to Clipboard

Source: https://github.com/yashaka/selene/blob/master/docs/faq/clipboard-copy-and-paste-howto.md

Illustrates how to get the current value of an input element and copy it to the clipboard.

```python
from selene import browser, query
import pyperclip

pyperclip.copy(browser.element('input').get(query.value))
```

--------------------------------

### Opening TodoMVC Page with Selene

Source: https://github.com/yashaka/selene/blob/master/docs/selene-in-action-tutorial.md

Demonstrates how to open the TodoMVC application URL using the Selene browser automation library.

```python
# open TodoMVC page
browser.open('https://todomvc-emberjs-app.autotest.how/')

# add todos: 'a', 'b', 'c'
# todos should be 'a', 'b', 'c'

# toggle 'b'
# completed todos should be 'b'
# active todos should be 'a', 'c'
```

--------------------------------

### Add Mkdocstrings Dependency

Source: https://github.com/yashaka/selene/blob/master/docs/contribution/documentation-for-project-tutorial.md

Adds mkdocstrings with Python support to your project, enabling automatic documentation generation from Python docstrings.

```plain
poetry add mkdocstrings[python]@latest --group docs
```

--------------------------------

### Complete TodoMVC Test Scenario

Source: https://github.com/yashaka/selene/blob/master/docs/selene-in-action-tutorial.md

Presents the full, condensed Selene code for the TodoMVC test scenario, including opening the app, adding todos, toggling one, and verifying the completed and active states, with comments removed for conciseness.

```python
browser.open('https://todomvc-emberjs-app.autotest.how/')

browser.element('#new-todo').type('a').press_enter()
browser.element('#new-todo').type('b').press_enter()
browser.element('#new-todo').type('c').press_enter()
browser.all('#todo-list>li').should(have.exact_texts('a', 'b', 'c'))

browser.all('#todo-list>li').element_by(have.exact_text('b')) \
    .element('.toggle').click()
browser.all('#todo-list>li').by(have.css_class('completed')) \
    .should(have.exact_texts('b'))
browser.all('#todo-list>li').by(have.no.css_class('completed')) \
    .should(have.exact_texts('a', 'c'))
```

--------------------------------

### Interact with Iframes using element.frame_context (removed comments)

Source: https://github.com/yashaka/selene/blob/master/docs/faq/iframes-howto.md

A version of the `element.frame_context` example with comments removed for a cleaner view of the code structure.

```python
from selene import browser, command, have, query


... 

iframe = browser.element('#editor-iframe').frame_context
iframe.all('strong').should(have.size(0))
iframe.element('.textarea').type('Hello, World!').perform(command.select_all)
browser.element('#toolbar').element('#bold').click()
iframe.all('strong').should(have.size(1))
iframe.element('.textarea').should(
    have.js_property('innerHTML').value(
        '<p><strong>Hello, world!</strong></p>'
    )
)
```

--------------------------------

### Clone Selene Repository

Source: https://github.com/yashaka/selene/blob/master/CONTRIBUTING.md

Instructions for cloning your fork of the Selene project to your local machine.

```git
git clone https://github.com/[my-github-username]/selene.git
```

--------------------------------

### HTML Input Element

Source: https://github.com/yashaka/selene/blob/master/docs/selene-in-action-tutorial.md

Example of an HTML input element with an ID, placeholder, and autofocus attribute, which can be targeted by Selene for interaction.

```html
<input type="text" id="new-todo" placeholder="What needs to be done?"
       autofocus="">
```

--------------------------------

### Interact with Iframes using element.frame_context (formatted, with extra newlines)

Source: https://github.com/yashaka/selene/blob/master/docs/faq/iframes-howto.md

An example of `element.frame_context` formatted with additional newlines to highlight code alignment and differences.

```python
from selene import browser, command, have, query


... 

iframe = browser.element('#editor-iframe').frame_context




iframe.all('strong').should(have.size(0))
iframe.element('.textarea').type('Hello, World!').perform(command.select_all)



browser.element('#toolbar').element('#bold').click()



iframe.all('strong').should(have.size(1))
iframe.element('.textarea').should(
    have.js_property('innerHTML').value(
        '<p><strong>Hello, world!</strong></p>'
    )
)
```