Running selenium js client side

Viewed 265

I am trying to create a project using selenium with javascript. It involves having to use selenium to edit content of a webpage.

I have a news.html (webpage content to be edited) file along with a news.mjs and news.css file in one folder and in the same folder the node_modules folder containing all npm packages installed.

I cannot seem to get selenium to work client side.

I have tried using Browserify and get the following error:

uncaught error: failed to import atoms module get-attribute.js. if running in dev mode, you need to run bazel build //javascript/node/selenium-webdriver/lib/atoms:get-attribute.js from the projectroot: error: cannot find module './atoms/get-attribute.js'

I then tried to import the model using ES6 Javascript and I got the following error: Uncaught TypeError: Failed to resolve module specifier "selenium-webdriver". Relative references must start with either "/", "./", or "../". The following is my html code

 <body>
    <nav id="nav">
        <ul>
            <li id="science"><button>Science</button></li>
            <li id="tech"><button>Technology</button></li>
            <li id="politics"><button>Politics</button></li>
        </ul>
    </nav>
    <section id="content">
        <div class="news">
            <img src="" alt="image">
            <div class="info">
                <h2>Header</h2>
            <p>Paragraph content </p>
            </div> 
        </div>
</section>
</body>

The following was a news.js file I used whenI tried to use browserify to solve the issue

const {Builder,By,Key,until}=require ("selenium-webdriver");
const driver= new Builder().forBrowser("chrome").build();

var siteArticles=document.querySelectorAll(".news");
science("https://www.theverge.com/tech");

async function science(sites){
    let links=[];
    let header=[];
    let desc=[];
    let imgSrc=[];
    await driver.get(sites);
    let articles= await driver.findElements(By.css("c-entry-box--compact--article"));
    articles.forEach(async article => {
        let articleLink=await article.findElement(By.css("a"));
        let articleImg=await articles.findElement(By.css("img"));
        let articleTitle= articleLink.getText();
        let articleLinkSrc=await articleLink.getAttribute("href");
        header.push(articleTitle);
        imgSrc.push(articleImg);
        links.push(articleLinkSrc);
    });
    for(i=0;i<3;i++){
        await driver.get(links[i]);
        let main= await driver.findElement(By.css("main"));
        let firstPara= (await main.findElement(By.css("p"))).getText();
        desc.push(firstPara);

    }
    for (articleIndex=0;articleIndex<siteArticles.length;articleIndex++){
        let currentArticle=siteArticles[articleIndex];
        currentArticle.querySelector("h2").textContent=header[articleIndex];
        currentArticle.querySelector("img").src=imgSrc[articleIndex];
        currentArticle.querySelector("p").textContent=desc[articleIndex];
    }


}


For my current news.mjs file I have written the same Javascript code except,

const {Builder,By,Key,until}=require ("selenium-webdriver");

Has been replaced with

import { Builder, By, Key, until } from "selenium-webdriver";

My question is, how do I get selenium to run client and on the browser in this program?

0 Answers
Related