Return mapping from ref to CSS and XPath locators

[mohamed99akram]

Can you provide a method for returning CSS locators and XPath locators for snapshot ref?
browser_generate_locator returns playwright code and browser_evaluate is a bit slow. We need to map the snapshot ref to locators for later use and replicating the browser actions. We need it to return what it can return (ID, CSS, XPath) locators.

[pavelfeldman]

Why is browser_evaluate slow? Whatever we do is likely to be similar in terms of working time.

[mohamed99akram]

Well, using this code:

import time
from mcp.client.streamable_http import streamable_http_client
from mcp import ClientSession

MCP_URL = "http://localhost:8931/mcp"  # exposed by docker-compose ports: 8931:8931

# REF_URL = "https://example.com"
REF_URL = "https://ollama.com"

async def main():
    async with streamable_http_client(MCP_URL) as (read, write, _):
        async with ClientSession(read, write) as session:
            await session.initialize()

            # Navigate to the reference page
            await session.call_tool("browser_navigate", arguments={"url": REF_URL})

            # Take a snapshot to see what elements are on the page
            snapshot = await session.call_tool("browser_snapshot", arguments={})
            print("=== Page Snapshot ===")
            print(snapshot.content[0].text)

            # Generate locators for elements by ref (element reference from the snapshot)
            # The snapshot will print ref numbers like [ref=e1], [ref=e2], etc.
            # Pick a few refs to generate locators for
            import re
            refs = re.findall(r'ref=(\w+)', snapshot.content[0].text)
            print(f"\n=== Found refs: {refs} ===\n")

            for ref in refs[0:1]:  # test 5 refs
                start = time.perf_counter()
                result = await session.call_tool(
                    "browser_evaluate",
                    arguments={
                        "ref": ref,
                        "function": """(element) => {
                            function getCSSPath(el) {
                                if (el === document.documentElement) return 'html';
                                if (el === document.body) return 'html > body';
                                const parent = getCSSPath(el.parentElement);
                                const tag = el.tagName.toLowerCase();
                                const siblings = [...el.parentElement.children].filter(c => c.tagName === el.tagName);
                                const part = siblings.length > 1
                                    ? tag + ':nth-of-type(' + (siblings.indexOf(el) + 1) + ')'
                                    : tag;
                                return parent + ' > ' + part;
                            }
                            function getXPath(el) {
                                if (el === document.documentElement) return '/html';
                                if (el === document.body) return '/html/body';
                                const tag = el.tagName.toLowerCase();
                                const siblings = [...el.parentNode.children].filter(c => c.tagName === el.tagName);
                                const idx = siblings.indexOf(el) + 1;
                                return getXPath(el.parentNode) + '/' + tag + (siblings.length > 1 ? '[' + idx + ']' : '');
                            }
                            return JSON.stringify({
                                id: element.id || null,
                                css: getCSSPath(element),
                                xpath: getXPath(element),
                            });
                        }"""
                    }
                )
                elapsed = time.perf_counter() - start
                dom = result.content[0].text if result.content else "(no result)"
                print(f"ref={ref} ({elapsed:.3f}s)")
                print(f"  DOM: {dom}")

asyncio.run(main())

It takes about 1.170 seconds for one ref to evaluate. And we need to have the equivalent locators for multiple refs, maybe 5 locators for a page which would cost 5-7 seconds for it. So, I thought maybe you already have the locators and could return them too or provide tools or parameters for returning them.

[mohamed99akram]

@pavelfeldman Or even provide a tool for listing mapping from ref to their locators for all refs available.

[dgozman]

@mohamed99akram It is entirely unclear why built-in method to do this would be any faster. Playwright does not store any prebuilt locators for elements, precisely because it's not free in terms of performance. I'll close this issue since there is no value to be added here.