began with extra "data-nicegui" attribute to test vue component loading

nicegui/elements/joystick.js

@@ -1,6 +1,6 @@
 Vue.component("joystick", {
   template: `
-    <div v-bind:id="jp_props.id" style="background-color:AliceBlue;position:relative;width:10em;height:10em" :style="jp_props.style"></div>
+    <div data-nicegui='joystick' v-bind:id="jp_props.id" style="background-color:AliceBlue;position:relative;width:10em;height:10em" :style="jp_props.style"></div>
     `,
   mounted() {
     const joystick = nipplejs.create({

nicegui/elements/keyboard.js

@@ -1,5 +1,5 @@
 Vue.component("keyboard", {
-  template: `<span v-bind:id="jp_props.id" :class="jp_props.classes" :style="jp_props.style"></span>`,
+  template: `<span data-nicegui='keyboard' v-bind:id="jp_props.id" :class="jp_props.classes" :style="jp_props.style"></span>`,
   mounted() {
     for (const event of this.$props.jp_props.options.active_js_events) {
       document.addEventListener(event, (evt) => {

tests/test_element.py

@@ -11,13 +11,22 @@ def test_keyboard(screen: Screen):
     ui.keyboard(on_key=lambda e: result.set_text(f'{e.key, e.action}'))
 
     screen.open('/')
-    screen.wait(2.5)
+    assert screen.selenium.find_element(By.TAG_NAME, 'base')
     assert any(s.endswith('keyboard.js') for s in screen.get_attributes('script', 'src'))
-    assert screen.get_tags('span')  # NOTE keyboard dom element is a span
+
+    assert screen.selenium.find_element(By.XPATH, '//span[@data-nicegui="keyboard"]')
     ActionChains(screen.selenium).send_keys('t').perform()
     screen.should_contain('t, KeyboardAction(keydown=False, keyup=True, repeat=False)')
 
 
+def test_joystick(screen: Screen):
+    ui.joystick()
+
+    screen.open('/')
+    assert any(s.endswith('keyboard.js') for s in screen.get_attributes('script', 'src'))
+    assert screen.selenium.find_element(By.XPATH, '//div[@data-nicegui="joystick"]')
+
+
 def test_classes(screen: Screen):
     label = ui.label('Some label')