NoSuchElementError：没有这样的元素：无法使用 Selenium Javascript 定位元素

Question

I am using selenium with Javascript. When I want to click on an element, I am getting this error. I used explicit wait but it did not help. Can anyone help me?

This is test.js file:

const Browser = require("../Browser")
const MainPage = require("../pageobjects/MainPage")
const AlertPage = require("../pageobjects/AlertPage");
describe("Test 1", function(){
    it("test case",  async function(){
         await Browser.goToUrl("https://demoqa.com/")
         let mainPage = new MainPage();
         let isMainPageDisplayed = await mainPage.isMainPageDisplayed();
         expect(isMainPageDisplayed).to.be.true
         await mainPage.clickAlertFrameWindows()
         let alertPage = new AlertPage()
         let isAlertPageDisplayed = await alertPage.isAlertElDisplayed();
         expect(isAlertPageDisplayed).to.be.true
         await alertPage.clickAlertEl()
         await Browser.closeBrowser()
    })
})

AlertPage.js:

class AlertPage{
    #name = "Alert Page";
    #locator = "//span[text()='Alerts']"
    #alertEl = new BaseElement(this.#locator, "Alert button")

    clickAlertEl(){
 BrowserFactory.getBrowser().wait(until.elementLocated(By.xpath("//span[text()='Alerts']/ancestor::li[contains(@class,'btn')]")))
        this.#alertEl.clickWithExecutor()
 
    }
    isAlertElDisplayed(){
        // BrowserFactory.getBrowser().wait(until.elementLocated(By.xpath("//span[text()='Alerts']/ancestor::li[contains(@class,'btn')]")))
        return this.#alertEl.isElementPresent()
    }
}
module.exports = AlertPage;

Snapshot of HTML:

`

Answer 1

Generally <span> tags are easier to click. So within clickAlertEl() try:

BrowserFactory.getBrowser().wait(until.elementLocated(By.xpath("//span[text()='Alerts']//ancestor::li[1]")))

or simply

BrowserFactory.getBrowser().wait(until.elementLocated(By.xpath("//span[text()='Alerts']")))