python -m htttp.server
python script.py
python -m venv .venv
source .venv/bin/activate
pip install selenium| <!DOCTYPE html> | |
| <html lang="pt-br" dir="ltr"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Selenium webcomponent test</title> | |
| <script type="text/javascript" | |
| src="https://cdn.jsdelivr.net/npm/[email protected]/brython.min.js"> | |
| </script> | |
| <script type="text/javascript" | |
| src="https://cdn.jsdelivr.net/npm/[email protected]/brython_stdlib.min.js"> | |
| </script> | |
| <script type="text/python"> | |
| from browser import webcomponent, bind, document, html | |
| names = [ | |
| 'Eduardo', 'danyel', 'rapaix', 'codeshow', 'Fabricio', 'pachi' | |
| ] | |
| class CustomComponent: | |
| def __init__(self): | |
| self.shadow = self.attachShadow({'mode': 'open'}) | |
| class MeusNomes: | |
| def __init__(self): | |
| self.shadow = self.attachShadow({'mode': 'open'}) | |
| self.names = names | |
| def name_list(self, nested=False): | |
| """ | |
| shadow-DOM | |
| ul | |
| li | |
| li | |
| li | |
| """ | |
| node = self.shadow.select_one('ul') | |
| if node: | |
| self.shadow.removeChild(node) | |
| ul = html.UL(html.B('Names')) | |
| for name in self.names: | |
| ul <= html.LI(name) | |
| self.shadow <= ul | |
| if nested: | |
| self.shadow <= html.LI('nested') | |
| def attributeChangedCallback(self, attr, old_value, new_value, *_): | |
| if not new_value: | |
| self.names = names | |
| else: | |
| self.names = filter( | |
| lambda name: new_value.lower() in name.lower(), names | |
| ) | |
| if attr == 'nested': | |
| print('nested') | |
| self.name_list(True) | |
| self.name_list() | |
| def observedAttributes(self): | |
| return ['value', 'nested'] | |
| webcomponent.define('custom-component', CustomComponent) | |
| webcomponent.define('meus-nomes', MeusNomes) | |
| @bind('input', 'keyup') | |
| def change_value_on_input(event): | |
| document.select_one( | |
| 'meus-nomes' | |
| ).attrs['value'] = event.currentTarget.value | |
| </script> | |
| </head> | |
| <body onload="brython(1)"> | |
| <label for="value">Value:</label> | |
| <input type="text" name="value" value=""> | |
| <br> | |
| <meus-nomes value=''> | |
| </meus-nomes> | |
| </body> | |
| </html> |
| from selenium.webdriver import Chrome as Firefox | |
| url = 'http://localhost:8000' | |
| browser = Firefox() | |
| browser.get(url) | |
| def find_element_in_shadow(browser, component, element): | |
| return browser.execute_script( | |
| f'return document.querySelector("{component}").shadowRoot.querySelectorAll("{element}")' | |
| ) | |
| def find_elements_in_shadow(browser, component, element): | |
| return browser.execute_script( | |
| f'return document.querySelector("{component}").shadowRoot.querySelectorAll("{element}")' | |
| ) | |
| browser.find_element_by_tag_name('input').send_keys('dany') | |
| meus_nomes_lis = find_elements_in_shadow(browser, 'meus-nomes', 'li') | |
| print([e.text for e in meus_nomes_lis]) |