ortonikc / letxpath

LetXPath - Community driven product - open source project

LetXPath: Your Ultimate XPath & CSS Selector Finder

LetXPath is an open-source project designed to help you find XPath and CSS selectors with a single click, complete with code snippets tailored to the element type.

How to Use LetXPath? 🤔

1. Install the Extension: After installation, restart your browser.
2. Navigate to the Desired Page: Open the page from which you want to extract XPath.
3. Open DevTools: Click on the inspect window or press F12 (Function F12).
4. Access LetXPath: Open the LetXPath menu from the sidebar panel.
5. Get Your XPath: Click on the desired element to obtain its XPath.

Features 💭

1. Single-Click XPath: Obtain the best XPath with just one click.
2. Smart XPath Generation: Generates XPaths based on direct elements or parent-child relationships.
3. Dynamic XPaths: Supports dynamic XPaths, including relationships like following, following-sibling, preceding, and preceding-sibling.
4. Axis-Based XPaths: Creates XPaths based on axes.
5. User-Enhanced Axes: Allows enhanced axes XPaths through user selection.

Code Snippets 🎓

1. XPath with Driver Code: Provides driver code snippets.
2. Supported Frameworks: Currently supports Selenium (Java, Python, C#), Protractor JS, and Playwright (Node & Java).

Why Choose LetXPath? 🤔

While there are many XPath tools available, LetXPath stands out by not only offering XPaths and snippets but also providing video tutorials on building the entire tool. It’s the only product that shows you how to create the tool itself.

Get Started

• Source Code: GitHub
• Tutorial: Video Tutorial

Troubleshooting 😢

If it doesn’t work, restarting your browser should resolve most issues. Feel free to raise any bugs on GitHub.

Is It Free? 😱

Yes, LetXPath is completely free and always will be.

What’s in It for You? 🙋

Installing LetXPath brings you the joy of seamless XPath generation and the satisfaction of leaving a 5-star rating.

Roadmap 😁

Our roadmap is extensive and full of features designed to save you time. Stay tuned for more updates!

Thanks for reading this far! Install LetXPath now and start exploring—you might just fall in love with it. 😉

letxpath's Issues

How to advise/find out what LetXPath needs to probe iframes

This is not an issue, more of a request for information/guidance.

I am an automation engineer attempting to use Playwright/LetXPath to write some Gui tests for an application that I support.

When I use LetXPath to probe into the application, I see that it is not able to provide the XPath/CSS snippets.
I attach a picture to show what I mean.

I suspect that not all iframes are constructed the same and wondered what recommendations are there that I can check/feedback to the Angular developers to see how to make their iframes more accessible to Playwright.

Thanks in advance!

on german keyboard with mac user can not type @

Describe the bug
I am using German keyboard and when I want to type @ in Mac the plugin drop-down opened and does not let me to type anything.
I have to go to manage extensions and disable the plugin, do the typing and again enable that.
see the attached photo
To Reproduce
Steps to reproduce the behavior:
first change key board layout in mac to german.

1. Go to any website for example google.com
2. try to type @something - the key is option L in mac
3. the dropdown opened and does not let you to continue.
4. See error on attached photo

Expected behavior
user can type @ with german keyboard on mac OS

Desktop (please complete the following information):

• OS: Mac OS
• Browser chrome
• Version latest

Update: The same issue is on English keyboard also.

Found bug in the youtube channel link

Describe the bug
https://youtub.com/letcode
this is the URL on the page. Seems it had an 'e' missing.

A clear and concise description of what the bug is.
When clicked on the above-mentioned link in the documentation, it takes the client to an error page. Probably, we can have a prior check for all the URLs in the documentation to check if they send to an unknown URL and show an alert[ "apology from the developer, he made a typing mistake, apology from the chrome developers, who couldn't fix it in 2020"]

Expected behavior
A clean, informative user experience

Additional context
Add any other context about the problem here.

For google page i.e the url https://google.com - LetXPath fails to fetch the xpath for google searchbox or any random elements on that page

Describe the bug
https://google.com - > Unable to capture xpath for this page

To Reproduce
Steps to replicate the behavior:

1. Go to 'https://google.com'
2. Do right click on google search box and go to inspect element
3. LetXPath fails to fetch the xpaths.

No message is displayed. Please display the message if something went wrong or if it is inside the iframe.

Expected behavior
It should display a message if the google page or any page is inside the iframe.
For eg: This element might be inside iframe from different src.

Screenshots

Python snippets are obsolete

Wheh you are using Python snippets, it is using obsolete functions for click, getText, etc.

For example this case:

Clicking on the button highlighted with red arrow, it is generating the following code:
find_element_by_xpath("//div[@Class='column']//img[1]").click();

Latest version of Selenium for Python using this code instead of previous:
find_element(By.XPATH,"//div[@Class='column']//img[1]").click()

PLEASE NOTE: in Python language, semicolon at the end of line is also unnecessary! Please, remove it as well to keep the syntax correct.
Thank you in advnace.
Awaiting for update.

Unable to use LetXPath in Chrome Incognito window

LetXPath doesn't generate XPath in Chrome Incognito window

To Reproduce
Steps to reproduce the behavior:

1. I enabled LetXPath for Chrome Incognito mode
2. Opened an Incognito window and enabled LetXPath
3. Selected an element
4. Element XPath details are not generated

Expected behavior
Element XPath details should be generated in Incognito window

Desktop (please complete the following information):

• OS: MacOS Venture 13.0
• Browser - Chrome
• Version - 125.0.6422.113 (Official Build) (arm64)

[Violation] Permissions policy violation: unload is not allowed in this document," is typically related to browser security restrictions. The `document.execCommand('copy')` having this issue while trying to add an copy to clipboard function

The error encountering is, "[Violation] Permissions policy violation: unload is not allowed in this document," is typically related to browser security restrictions. The document.execCommand('copy') method, used for copying text to the clipboard, may trigger this violation in certain contexts, especially within browser extensions.

To address this issue, I have updated copyToClipboard in my manifest.json

function copyToClipboard(text) {
  navigator.clipboard.writeText(text)
    .then(() => {
      console.log('Text copied to clipboard:', text);
    })
    .catch((error) => {
      console.error('Unable to copy to clipboard:', error);
    });
}

function copySelectedToClipboard() {
  const selectedCheckboxes = document.querySelectorAll('input[type="checkbox"]:checked');
  let clipboardText = '';

  selectedCheckboxes.forEach((checkbox, index) => {
    const accordionContent = checkbox.nextElementSibling;
    const textarea = accordionContent.querySelector('textarea');
    const accordionText = textarea ? textarea.value.trim() : '';

    clipboardText += `${checkbox.value}\n${accordionText}`;

    // Add a newline separator between items, except for the last one
    if (index < selectedCheckboxes.length - 1) {
      clipboardText += '\n';
    }
  });

  copyToClipboard(clipboardText);
}

but still have the same error

Please fxe the bug of pySnippet, here is the code

function pySnippet(type, codeType, codeValue, variable) {

let str;
// getAttribute Collection based XPath //input[@placeholder='first name & last name'] firstName" false
switch (codeType) {
    case "CSS":
        str = `driver.find_element(by=By.CSS_SELECTOR, value="${codeValue}")`;
        break;
    case "Unique Class Atrribute":
        str = `driver.find_element(by=By.CLASS_NAME, value="${codeValue}")`;
        break;
    case "Unique TagName":
        str = `driver.find_element(by=By.TAG_NAME, value="${codeValue}")`;
        break;
    case "Link Text":
        str = `driver.find_element(by=By.LINK_TEXT, value="${codeValue}")`;
        break;
    case "Unique ID":
        str = `driver.find_element(by=By.ID, value="${codeValue}")`;
        break;
    case "Unique Name":
        str = `driver.find_element(by=By.NAME, value="${codeValue}")`;
        break;
    case "Unique PartialLinkText":
        str = `driver.find_element(by=By.PARTIAL_LINK_TEXT, value="${codeValue}")`;
        break;
    default:
        str = `driver.find_element(by=By.XPATH, value="${codeValue}")`;
        break;
}
switch (type) {
    case "click":
        str += `.click();`
        break;
    case "sendKeys":
        str += `.send_keys();`
        break;
    case "getAttribute":
        str += `.get_attribute();`
        break;
    case "getText":
        str += `.get_text();`
        break;
    default:
        str = 'hide';
        break;
}
return str;

}