test_queryselector.py

# Copyright (c) Microsoft Corporation.
#
# Licensed under the Apache License, Version 2.0 (the "License");
# you may not use this file except in compliance with the License.
# You may obtain a copy of the License at
#
# http://www.apache.org/licenses/LICENSE-2.0
#
# Unless required by applicable law or agreed to in writing, software
# distributed under the License is distributed on an "AS IS" BASIS,
# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
# See the License for the specific language governing permissions and
# limitations under the License.
from pathlib import Path

import pytest

from playwright.sync_api import Browser, Error, Page, Selectors

from .utils import Utils


def test_selectors_register_should_work(
    selectors: Selectors, browser: Browser, browser_name: str
) -> None:
    tag_selector = """
        {
            create(root, target) {
                return target.nodeName;
            },
            query(root, selector) {
                return root.querySelector(selector);
            },
            queryAll(root, selector) {
                return Array.from(root.querySelectorAll(selector));
            }
        }"""

    selector_name = f"tag_{browser_name}"
    selector2_name = f"tag2_{browser_name}"

    # Register one engine before creating context.
    selectors.register(selector_name, tag_selector)

    context = browser.new_context()
    # Register another engine after creating context.
    selectors.register(selector2_name, tag_selector)

    page = context.new_page()
    page.set_content("<div><span></span></div><div></div>")

    assert page.eval_on_selector(f"{selector_name}=DIV", "e => e.nodeName") == "DIV"
    assert page.eval_on_selector(f"{selector_name}=SPAN", "e => e.nodeName") == "SPAN"
    assert page.eval_on_selector_all(f"{selector_name}=DIV", "es => es.length") == 2

    assert page.eval_on_selector(f"{selector2_name}=DIV", "e => e.nodeName") == "DIV"
    assert page.eval_on_selector(f"{selector2_name}=SPAN", "e => e.nodeName") == "SPAN"
    assert page.eval_on_selector_all(f"{selector2_name}=DIV", "es => es.length") == 2

    # Selector names are case-sensitive.
    with pytest.raises(Error) as exc:
        page.query_selector("tAG=DIV")
    assert 'Unknown engine "tAG" while parsing selector tAG=DIV' in exc.value.message

    context.close()


def test_selectors_register_should_work_with_path(
    selectors: Selectors, page: Page, utils: Utils, assetdir: Path
) -> None:
    utils.register_selector_engine(
        selectors, "foo", path=assetdir / "sectionselectorengine.js"
    )
    page.set_content("<section></section>")
    assert page.eval_on_selector("foo=whatever", "e => e.nodeName") == "SECTION"


def test_selectors_register_should_work_in_main_and_isolated_world(
    selectors: Selectors, page: Page, utils: Utils
) -> None:
    dummy_selector_script = """{
      create(root, target) { },
      query(root, selector) {
        return window.__answer;
      },
      queryAll(root, selector) {
        return window['__answer'] ? [window['__answer'], document.body, document.documentElement] : [];
      }
    }"""

    utils.register_selector_engine(selectors, "main", dummy_selector_script)
    utils.register_selector_engine(
        selectors, "isolated", dummy_selector_script, content_script=True
    )
    page.set_content("<div><span><section></section></span></div>")
    page.evaluate('() => window.__answer = document.querySelector("span")')
    # Works in main if asked.
    assert page.eval_on_selector("main=ignored", "e => e.nodeName") == "SPAN"
    assert page.eval_on_selector("css=div >> main=ignored", "e => e.nodeName") == "SPAN"
    assert page.eval_on_selector_all(
        "main=ignored", "es => window.__answer !== undefined"
    )
    assert (
        page.eval_on_selector_all("main=ignored", "es => es.filter(e => e).length") == 3
    )
    # Works in isolated by default.
    assert page.query_selector("isolated=ignored") is None
    assert page.query_selector("css=div >> isolated=ignored") is None
    # $$eval always works in main, to avoid adopting nodes one by one.
    assert page.eval_on_selector_all(
        "isolated=ignored", "es => window.__answer !== undefined"
    )
    assert (
        page.eval_on_selector_all("isolated=ignored", "es => es.filter(e => e).length")
        == 3
    )
    # At least one engine in main forces all to be in main.
    assert (
        page.eval_on_selector("main=ignored >> isolated=ignored", "e => e.nodeName")
        == "SPAN"
    )
    assert (
        page.eval_on_selector("isolated=ignored >> main=ignored", "e => e.nodeName")
        == "SPAN"
    )
    # Can be chained to css.
    assert (
        page.eval_on_selector("main=ignored >> css=section", "e => e.nodeName")
        == "SECTION"
    )


def test_selectors_register_should_handle_errors(
    selectors: Selectors, page: Page, utils: Utils
) -> None:
    with pytest.raises(Error) as exc:
        page.query_selector("neverregister=ignored")
    assert (
        'Unknown engine "neverregister" while parsing selector neverregister=ignored'
        in exc.value.message
    )

    dummy_selector_engine_script = """{
      create(root, target) {
        return target.nodeName;
      },
      query(root, selector) {
        return root.querySelector('dummy');
      },
      queryAll(root, selector) {
        return Array.from(root.query_selector_all('dummy'));
      }
    }"""

    with pytest.raises(Error) as exc:
        selectors.register("$", dummy_selector_engine_script)
    assert (
        exc.value.message
        == "Selectors.register: Selector engine name may only contain [a-zA-Z0-9_] characters"
    )

    # Selector names are case-sensitive.
    utils.register_selector_engine(selectors, "dummy", dummy_selector_engine_script)
    utils.register_selector_engine(selectors, "duMMy", dummy_selector_engine_script)

    with pytest.raises(Error) as exc:
        selectors.register("dummy", dummy_selector_engine_script)
    assert (
        exc.value.message
        == 'Selectors.register: "dummy" selector engine has been already registered'
    )

    with pytest.raises(Error) as exc:
        selectors.register("css", dummy_selector_engine_script)
    assert (
        exc.value.message == 'Selectors.register: "css" is a predefined selector engine'
    )


def test_should_work_with_layout_selectors(page: Page) -> None:
    #        +--+  +--+
    #        | 1|  | 2|
    #        +--+  ++-++
    #        | 3|   | 4|
    #   +-------+  ++-++
    #   |   0   |  | 5|
    #   | +--+  +--+--+
    #   | | 6|  | 7|
    #   | +--+  +--+
    #   |       |
    #   O-------+
    #           +--+
    #           | 8|
    #           +--++--+
    #               | 9|
    #               +--+

    boxes = [
        # x, y, width, height
        [0, 0, 150, 150],
        [100, 200, 50, 50],
        [200, 200, 50, 50],
        [100, 150, 50, 50],
        [201, 150, 50, 50],
        [200, 100, 50, 50],
        [50, 50, 50, 50],
        [150, 50, 50, 50],
        [150, -51, 50, 50],
        [201, -101, 50, 50],
    ]
    page.set_content(
        '<container style="width: 500px; height: 500px; position: relative;"></container>'
    )
    page.eval_on_selector(
        "container",
        """(container, boxes) => {
    for (let i = 0; i < boxes.length; i++) {
      const div = document.createElement('div');
      div.style.position = 'absolute';
      div.style.overflow = 'hidden';
      div.style.boxSizing = 'border-box';
      div.style.border = '1px solid black';
      div.id = 'id' + i;
      div.textContent = 'id' + i;
      const box = boxes[i];
      div.style.left = box[0] + 'px';
      // Note that top is a flipped y coordinate.
      div.style.top = (250 - box[1] - box[3]) + 'px';
      div.style.width = box[2] + 'px';
      div.style.height = box[3] + 'px';
      container.appendChild(div);
      const span = document.createElement('span');
      span.textContent = '' + i;
      div.appendChild(span);
    }
  }""",
        boxes,
    )

    assert page.eval_on_selector("div:right-of(#id6)", "e => e.id") == "id7"
    assert page.eval_on_selector("div:right-of(#id1)", "e => e.id") == "id2"
    assert page.eval_on_selector("div:right-of(#id3)", "e => e.id") == "id4"
    assert page.query_selector("div:right-of(#id4)") is None
    assert page.eval_on_selector("div:right-of(#id0)", "e => e.id") == "id7"
    assert page.eval_on_selector("div:right-of(#id8)", "e => e.id") == "id9"
    assert (
        page.eval_on_selector_all(
            "div:right-of(#id3)", "els => els.map(e => e.id).join(',')"
        )
        == "id4,id2,id5,id7,id8,id9"
    )
    assert (
        page.eval_on_selector_all(
            "div:right-of(#id3, 50)", "els => els.map(e => e.id).join(',')"
        )
        == "id2,id5,id7,id8"
    )
    assert (
        page.eval_on_selector_all(
            "div:right-of(#id3, 49)", "els => els.map(e => e.id).join(',')"
        )
        == "id7,id8"
    )

    assert page.eval_on_selector("div:left-of(#id2)", "e => e.id") == "id1"
    assert page.query_selector("div:left-of(#id0)") is None
    assert page.eval_on_selector("div:left-of(#id5)", "e => e.id") == "id0"
    assert page.eval_on_selector("div:left-of(#id9)", "e => e.id") == "id8"
    assert page.eval_on_selector("div:left-of(#id4)", "e => e.id") == "id3"
    assert (
        page.eval_on_selector_all(
            "div:left-of(#id5)", "els => els.map(e => e.id).join(',')"
        )
        == "id0,id7,id3,id1,id6,id8"
    )
    assert (
        page.eval_on_selector_all(
            "div:left-of(#id5, 3)", "els => els.map(e => e.id).join(',')"
        )
        == "id7,id8"
    )

    assert page.eval_on_selector("div:above(#id0)", "e => e.id") == "id3"
    assert page.eval_on_selector("div:above(#id5)", "e => e.id") == "id4"
    assert page.eval_on_selector("div:above(#id7)", "e => e.id") == "id5"
    assert page.eval_on_selector("div:above(#id8)", "e => e.id") == "id0"
    assert page.eval_on_selector("div:above(#id9)", "e => e.id") == "id8"
    assert page.query_selector("div:above(#id2)") is None
    assert (
        page.eval_on_selector_all(
            "div:above(#id5)", "els => els.map(e => e.id).join(',')"
        )
        == "id4,id2,id3,id1"
    )
    assert (
        page.eval_on_selector_all(
            "div:above(#id5, 20)", "els => els.map(e => e.id).join(',')"
        )
        == "id4,id3"
    )

    assert page.eval_on_selector("div:below(#id4)", "e => e.id") == "id5"
    assert page.eval_on_selector("div:below(#id3)", "e => e.id") == "id0"
    assert page.eval_on_selector("div:below(#id2)", "e => e.id") == "id4"
    assert page.eval_on_selector("div:below(#id6)", "e => e.id") == "id8"
    assert page.eval_on_selector("div:below(#id7)", "e => e.id") == "id8"
    assert page.eval_on_selector("div:below(#id8)", "e => e.id") == "id9"
    assert page.query_selector("div:below(#id9)") is None
    assert (
        page.eval_on_selector_all(
            "div:below(#id3)", "els => els.map(e => e.id).join(',')"
        )
        == "id0,id5,id6,id7,id8,id9"
    )
    assert (
        page.eval_on_selector_all(
            "div:below(#id3, 105)", "els => els.map(e => e.id).join(',')"
        )
        == "id0,id5,id6,id7"
    )

    assert page.eval_on_selector("div:near(#id0)", "e => e.id") == "id3"
    assert (
        page.eval_on_selector_all(
            "div:near(#id7)", "els => els.map(e => e.id).join(',')"
        )
        == "id0,id5,id3,id6"
    )
    assert (
        page.eval_on_selector_all(
            "div:near(#id0)", "els => els.map(e => e.id).join(',')"
        )
        == "id3,id6,id7,id8,id1,id5"
    )
    assert (
        page.eval_on_selector_all(
            "div:near(#id6)", "els => els.map(e => e.id).join(',')"
        )
        == "id0,id3,id7"
    )
    assert (
        page.eval_on_selector_all(
            "div:near(#id6, 10)", "els => els.map(e => e.id).join(',')"
        )
        == "id0"
    )
    assert (
        page.eval_on_selector_all(
            "div:near(#id0, 100)", "els => els.map(e => e.id).join(',')"
        )
        == "id3,id6,id7,id8,id1,id5,id4,id2"
    )

    assert (
        page.eval_on_selector_all(
            "div:below(#id5):above(#id8)", "els => els.map(e => e.id).join(',')"
        )
        == "id7,id6"
    )
    assert page.eval_on_selector("div:below(#id5):above(#id8)", "e => e.id") == "id7"

    assert (
        page.eval_on_selector_all(
            "div:right-of(#id0) + div:above(#id8)",
            "els => els.map(e => e.id).join(',')",
        )
        == "id5,id6,id3"
    )

    with pytest.raises(Error) as exc_info:
        page.query_selector(":near(50)")
    assert (
        '"near" engine expects a selector list and optional maximum distance in pixels'
        in exc_info.value.message
    )
    with pytest.raises(Error) as exc_info:
        page.query_selector('left-of="div"')
    assert '"left-of" selector cannot be first' in exc_info.value.message