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?