t33n t33n - 23 days ago 6
Javascript Question

webdriver.io how to remove elements from DOM with node.js

Imagine I would visit a website. And on this website is a big amount of data. But all of this data has the same class. As example:

li.sampleClass


Then when you scroll down new data will be added with endless scroll. But the DOM will never be cleared.. Every new data will be stored as li.sampleClass this causes extrem high hardware usage and

.getText('li.sampleClass')


stop working with high amounts of multiple data with the same class. When you look in the Inspector you can see all the stored data. So I thought why not clear the DOM and delete the old data before scrolling to the next.

Is there a way to remove complete classes or ID´s from the DOM with webdriver.io or do you know a other tricky way to split the process with .getText? Please notice that I use node.js on localhost and I don´t have access to the website. The website is online so I think I can´t use something like

.execute


from webdriver.io to clear the DOM via js or can I?

Answer Source

Yes, you can remove classes/ids from elements using browser.execute() method.

E.g., you want to remove sampleClass from every li. So, it will look like

browser.execute('const liElements = document.querySelector(\'li.sampleClass\'); liElements.classList.remove(\'sampleClass\')')

Or the same, but instead of passing JS script as a string, you can use function

browser.execute(() => { cosnt liElements = document.querySelector('li.sampleClass') liElements.classList.remove('sampleClass') }

Check the documentation http://webdriver.io/api/protocol/execute.html for more details.