Category: javascript

Im working on a game where web clients will all be using the same EOSIO table data. I want to keep them synced up when one person makes a change to the table without everyone needing to poll the table. I figured the best way would be to have a server they connect to, the server will just be a middle man. If one person makes a change it will stop everyone else from trying and then push all the new data to the clients. Im new to web development and am unsure of the best way to go about it.
Should I just use SSE or websockets? Though it seems websockets are now kind of obsolete.
Im also unsure about how to go about the server part. Would I use node.js for that?
Or is there something really simple I’m missing?

Thank you. I appreciate any feedback.

I need help with setting urls to JS variables,

<script>
  var urlgo = document.getElementById('gourl');
  var seturl = document.getElementById('urlbox').value;
  setInterval(() => {
  urlgo.setAttribute('href', seturl);
}, 300);
</script>
<input id="urlbox"><a href="main.htm" target=main id=gourl><button>Go</button></a>

It doesn’t work in any internet browser I tested it in, how do I get it to work?
The behavior I expected is that every 0.3 seconds, the url of the go button is set to the value of the text box, but nothing happens when i use it, does anyone know how to make it work?
If it helps, the error I get is “Uncaught SyntaxError: Unexpected token ‘;'”

I am trying to remove an element from an array in this code below, but I keep getting the following error:

[e[t].remove is not a function]

Does anyone know why I am getting this error and is there another way to remove from an array?

for(let i = 0; i < tempArray.length; i++) {
                    let oppsAndAccounts = [];
                    this.oppsAndAccounts = tempArray[i].Opportunities;
                    for(let j = 0; j < tempArray.length; j++) {
                        if (tempArray[i].id == tempArray[j].ParentId) {
                            //const index = tempArray.indexOf()
                            oppsAndAccounts.push(tempArray[j]);
                            tempArray[i].remove(j);
                        }
                    }
                    tempArray[i].children = oppsAndAccounts;
                }

I do not want to simply make a form field appear and disappear with javascript. Instead I want to swap a form field. This is in order to provide a separate set of options depending on a selection of yes/no.

I am starting from something like this

(comments in code start with //)

<script type="text/javascript">

    function yesnoCheck() {
if (document.getElementById'yesCheck').checked) {
    document.getElementById('ifYes').style.display = 'block';
}
else document.getElementById('ifYes').style.display = 'none';

}

</script>

//webform
Yes <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="yesCheck"> 

No <input type="radio" onclick="javascript:noyesCheck();" name="yesno" id="noCheck"> 
<br>

//The field to appear/disapear 
<div id="ifYes" style="display:none">
Make this appear and disappear
 </div>

This works fine for making it appear/disappear but I want not only to make a field appear and disappear I need to swap that field .

I tried this in order to make another in the opposite condition

<script type="text/javascript">

function yesnoCheck() {
if (document.getElementById('yesCheck').checked) {
    document.getElementById(ifYes').style.display = 'block';
}
else document.getElementById('ifYes').style.display = 'none';

}

</script>

<script type="text/javascript">

function noyesCheck() {
if (document.getElementById('noCheck').checked) {
    document.getElementById('ifNo').style.display = 'none';
}
else document.getElementById('ifNo').style.display = 'block';

}

</script>

//webform
Yes <input type="radio" onclick="javascript:yesnoCheck();" name="yesno" id="yesCheck"> 

No <input type="radio" onclick="javascript:noyesCheck();" name="yesno" id="noCheck"> 
<br>

//The field to appear/disappear 
<div id="ifYes" style="display:block">
Make this appear and disappear
 </div>

//The field to disappear/appear 
<div id="ifNo" style="display:none">
Make this disappear and appear
 </div>

So when it comes to javascript i am lost. Any help please? Maybe there is a good example somewhere? All I can find is the simple appear/disappear not for swapping the field. I know I did this once before.

I’m working on a React Web app, primarily designed to run in Chrome, that should support views across multiple desktop monitors and tabs. I’m wondering if any of you have seen any examples of web apps that implement any of the following features, or have any leads on a framework to use?

Some features I’m exploring include:

1. Launching new tabs into other monitors – From monitor/window/tab 1, I’d like to be able to launch a new full screen window into monitor 2. If a window is already open, I’d like to launch a second tab in that window.
2. Closing other tabs automatically – When a specific tab in window 1 is closed by the user, I’d like for a linked tab in window 2 to close as well. Ex: window 1 (parent) launches a new tab in window 2 (child). When window 1 is closed, I’d like window 2 to close as well.
3. Switching active tabs automatically – In monitor 1, a user has tabs 1A and 1B. Tab 1A launches tab 2A into monitor/window 2, and tab 1B launches tab 2B into monitor/window 2. As the user switches between tabs 1A and 1B in monitor one, ideally the tabs in monitor 2 would automatically switch between tabs 2A and 2B respectively.
4. Passing user inputs between multiple monitors – Tabs 1 and 2 are split across two different monitors. As the user clicks or scrolls through a module in Tab 1, that input information is passed to tab 2 and information is updated.

Some of these features can be tackled individually, and I’ve found some of the following resources:

1. Launching new tabs into other monitors

• Google presentation API – seems to be a cool new way to access external displays for presentation. May be limited in the number of tabs it organizes though, and is still in trial mode

2. Closing other tabs automatically

• Detecting a browser or tab closing – can potentially use this to send a message to child tab and have them close as well

3. Switching active tabs automatically

• Detect if a user has switched away tabs (has 2020 update). Could use this to listen on all tabs, to determine which is the active tab on monitor one. Haven’t found much on how to switch monitor 2 to the respective tab

4. Passing user inputs between multiple monitors

• Broadcast channel API. Additional StackOverflow post
• Window post message

Ideally, I would like this to be done in Chrome so that it’s lightweight for the end user. However, I am also exploring converting it to an Electron app depending on if these features are possible in a web app.
Additionally, another idea is forgoing the concept of multiple independent tabs, and only using two dedicated tabs across two monitors. Instead of launching actual independent new tabs, the existing view would just be updated within the webpage (think like how you switch between different conversations in your email. It’s all in one actual tab, but it renders a different “tab” per conversation and you can switch between).
Inbox, snoozed, important, etc are all treated as separate “tabs” from a UI perspective.

Thank you so much in advance – any advice, direction, experience, or suggestions are greatly appreciated!

Other interesting resources:

• Multi-screen apps using neo.mjs – really cool ability to drag items and interact between monitors. Tackles features #4 well, but doesn’t include much on the other features
• Good intro blog on multi-monitor features – talks about opening new windows, but seems to suggest Chrome lacks the ability to launch windows across different monitors.

Multi-monitor workstation

I’m new to Firebase but I understand how it might works but I’m stuck with this for too long and I can’t find any doc about it.

I want to update a user from “wallet” field (I don’t know his id) and add token with the new amount, so I get the user, the I get again the user to update the data

    const userCollec = await admin.firestore().collection('users').where('wallet', '==', req.data.sender).get();

    const UserToken = userCollec.get('token')
    const UserUsd = userCollec.get('usd')

    admin.firestore().collection('users').where('wallet', '==', req.data.sender).update({
      "token" : UserToken + Math.round(amount / 0.07),
      "usd" :  UserUsd + amount
    })

for me this should work but I don’t why it doesn’t and I have absolutly no idea.

I’m trying to change the color of a tabulator cell based on the input of the cell. My first step was to just simply try and change the color of the cell. Run the following code, I see the following

function testFormatter(cell, formatterParams) {

    cell.getElement().style.backgroundColor = "#A6A6DF";

}

Here is what my table looks like after using the cell formatter

I apologize if i get back to you late, this is my first StackOverflow post and I don’t know how long replies usually take to come in. Thank you!

I use discord.js v13. the error occurs when authorizing the bot client. At first I thought that this was a Discord limitation, but technical support could not help me with anything. I assume that the problem is in my software. It should be noted that previously everything worked perfectly.

Everything is fine with the token.

throw new HTTPError(error.message, error.constructor.name, error.status, request);
              ^

HTTPError [FetchError]: request to https://discord.com/api/v9/gateway/bot failed, reason: self signed certificate in certificate chain
    at RequestHandler.execute (C:UsersTDubbingOneDriveРабочий столDiscordПроектыEngineerBotnode_modulesdiscord.jssrcrestRequestHandler.js:200:15)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async RequestHandler.push (C:UsersTDubbingOneDriveРабочий столDiscordПроектыEngineerBotnode_modulesdiscord.jssrcrestRequestHandler.js:50:14)
    at async WebSocketManager.connect (C:UsersTDubbingOneDriveРабочий столDiscordПроектыEngineerBotnode_modulesdiscord.jssrcclientwebsocketWebSocketManager.js:133:9)
    at async Client.login (C:UsersTDubbingOneDriveРабочий столDiscordПроектыEngineerBotnode_modulesdiscord.jssrcclientClient.js:245:7) {
  code: 500,
  method: 'get',
  path: '/gateway/bot',
  requestData: { json: undefined, files: [] }
}

Probably a simple question. I just need the Bootstrap Carousel to populate data for each item in newMovies[]. In this case, there will always be 5 items total. Obviously what I have below is wrong, but I’ve tried a few different similar things and can’t figure it out. What is pasted below will only show data for the last item in the array.

<div className='container'>
            <img className='glowSign' src={glowSign} alt='New Releases'></img>
            <div id="carouselExampleIndicators" className="carousel slide" data-bs-interval="false" data-bs-ride="carousel">
                <ol className="carousel-indicators">
                    <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" className="active"></li>
                    <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1"></li>
                    <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2"></li>
                    <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="3"></li>
                    <li data-bs-target="#carouselExampleIndicators" data-bs-slide-to="4"></li>
                </ol>
                <div className="carousel-inner">
                    {newMovies.map((movie) => {
                        return(
                            <div className="carousel-item active" key={movie._id}>
                                <img className="d-block w-100" src={comedyGenre} alt="First slide"  />
                                <div className="carousel-caption d-md-block">
                                    <h5>{movie.title}</h5>
                                    <p>{movie.runtime}</p>
                                </div>
                            </div>
                        )
                    })}
                </div>
                <button className="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev">
                    <span className="carousel-control-prev-icon" aria-hidden="true"></span>
                </button>
                <button className="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next">
                    <span className="carousel-control-next-icon" aria-hidden="true"></span>
                </button>
            </div>
        </div>

Timestamp like 2022-01-13T18:16:51.651683Z, the fractional seconds can go up to 9 digits

How to get the fractional seconds after . and before Z, and not using Date type in javascript. Because the Date can loose the precision.

Expect to return 651683.

i’m using ml5 for a project, and what i’m trying to achieve is everytime my nose is detected inside an ellipse, a song starts and the ellipse moves with a perlin noise effect.

The problem is the “if function” is called too many times and I think it deteriorates the sound bc I think it starts it multiple times. Also even when my nose is inside the ellipse it keeps saying “false” and then “true” in the console and I don’t know why? What would be the best way to code this to make it work smoothly?

checkCollision(points) {
    points.forEach((keypoints) => {
      keypoints.forEach((keypoint) => {
        const pos = keypoint.position;
        const d = dist(pos.x, pos.y, this.x, this.y);
        const hasTriggered = d <= this.radius * 0.5;
        if (hasTriggered) {
          this.sound.play();
          this.maxnoise = lerp(this.maxnoise, 50, 0.05);
          console.log("true");
        } else {
          console.log("false");
          this.sound.stop();
          this.maxnoise = lerp(this.maxnoise, this.maxnoiseafter, 0.05);
        }
      });
    });
}

this is what my console looks like when i’m inside the ellipse and supposed to trigger the effect and the sound

I’m developing a web app on Gatsby using web3 and I have problems with the process.binding not defined. The develop works fine but not the build.

I understand that this comes from the process/browser not having “binding” and the fact I am not supposed to use Node.js functions but since it’s web3 which should work in the browser – Im not sure what to do.

Any direction will be appreciated. Have been banging my head at the wall for a while.

 ERROR 

Page data from page-data.json for the failed page "/[...]/": {
  "componentChunkName": "component---src-pages-js",
  "path": "/[...]/",
  "result": {
    "pageContext": {}
  },
  "staticQueryHashes": [],
  "matchPath": "/*"
}

failed Building static HTML for pages - 3.268s

 ERROR #95313 

Building static HTML failed for path "/[...]/"

See our docs page for more info on this error: https://gatsby.dev/debug-html


  175 |
  176 | process.binding = function (name) {
> 177 |     throw new Error('process.binding is not supported');
      | ^
  178 | };
  179 |
  180 | process.cwd = function () { return '/' };


  WebpackError: process.binding is not supported
  
  - browser.js:177 
    [artcart-buyers]/[process]/browser.js:177:1
  
  - index.js:7 
    [artcart-buyers]/[fs-minipass]/index.js:7:24
  
  - bootstrap:19 
    artcart-buyers/webpack/bootstrap:19:1
  
  - create.js:8 
    [artcart-buyers]/[tar]/lib/create.js:8:13
  
  - bootstrap:19 
    artcart-buyers/webpack/bootstrap:19:1
  
  - index.js:4 
    [artcart-buyers]/[tar]/index.js:4:13
  
  - bootstrap:19 
    artcart-buyers/webpack/bootstrap:19:1
  
  - files.js:19 
    [artcart-buyers]/[swarm-js]/lib/files.js:19:11
  
  - bootstrap:19 
    artcart-buyers/webpack/bootstrap:19:1
  
  - api-node.js:3 
    [artcart-buyers]/[swarm-js]/lib/api-node.js:3:13
  
  - bootstrap:19 
    artcart-buyers/webpack/bootstrap:19:1
  
  - index.js:23 
    [artcart-buyers]/[web3-bzz]/lib/index.js:23:13
  
  - bootstrap:19 
    artcart-buyers/webpack/bootstrap:19:1
  
  - index.js:34 
    [artcart-buyers]/[web3]/lib/index.js:34:11
  
  - bootstrap:19 
    artcart-buyers/webpack/bootstrap:19:1
  
  - bootstrap:19 
    artcart-buyers/webpack/bootstrap:19:1
  
  - static-entry.js:212 
    artcart-buyers/.cache/static-entry.js:212:27
  
  - Tokenizer.js:26 
    [artcart-buyers]/[stylis]/src/Tokenizer.js:26:1

the code for […].js:

import React from "react"
import { Auth0Provider } from "../utils/auth"
import  DataContextProvider  from "../utils/dataStore";
import EthereumContextProvider from "../utils/ethereumContext";
import { Router } from "@reach/router"
import PrivateRoute from "../components/PrivateRoute"
import Nft from '../components/pages/Nft'
import Transactions from '../components/pages/Transactions'
import Index from '../components/pages/Index'
import Account from '../components/pages/Account'
import "@ethersproject/shims"

const App = ({ element, location }) => {
    const isBrowser = typeof window !== "undefined"
    
    const onRedirectCallback = appState => {
        location.navigate(
          appState && appState.targetUrl
            ? appState.targetUrl
            : window.location.pathname
        )
      }

    if (isBrowser) {
        return (
            <>
            <EthereumContextProvider>
            <Auth0Provider
                domain={process.env.GATSBY_AUTH0_DOMAIN}
                client_id={process.env.GATSBY_AUTH0_CLIENTID}
                redirect_uri={window.location.origin}
                cacheLocation='localstorage'
                onRedirectCallback={onRedirectCallback}
            >
            <DataContextProvider>
            <Router>
                <PrivateRoute path="/" component={Index} />
                <PrivateRoute path="/nft" component={Nft} />
                <PrivateRoute path="/transactions" component={Transactions} />
                <PrivateRoute path="/account" component={Account} />
            </Router>
            </DataContextProvider>
            </Auth0Provider>
            </EthereumContextProvider>       
            </>
        )
    }
    else {
        return (
            <></>
        )
    }

}
export default App

I want a string (str) to get removed by the dashes and uppercase the char after where the dash has been removed.
The code removes the dashes successfully but don’t uppercase the next char.
I think the problem is at the line where I commented This code doesn’t work

So the variable str should get returned like: thisIsAnExample

str="this-is-an-example"

function toCamelCase(str) {
  if(str.includes("-")) {
    for(var i = 0; i < str.length; i++) {
      if (str[i] == "-") {
        str = str.replace(str[i], '');
        if (i < str.length-1) {
          str[i+1] = str[i+1].toUpperCase(); /*This code doesn't work*/
        }
      }
    }
  }
  return str;
}

I am in the middle of the development phase of this app, and we want to host it somewhere where the clients will be able to play around with it and see what features are currently existing. While all of the features and routes that we currently have are working properly on my machine locally, whenever we try to get the app running off of Expo-Go using Heroku to run the backend, none of the routes work anymore.
The Routes are all done on the client side of things, so the front-end files have everything involving routes. That part of my app.js file looks like this…

return (
    <NativeRouter>
      <RecoilRoot>
        <ApolloProvider client={client}>
          <PaperProvider>
            <View style={AppStyles.container}>
            
             <View>

                {loggedIn === false ? (<LandingPage handleLoggedIn={handleLoggedIn}/>) : null}
                
                {loggedIn === true ? (
                  <Banner handleLoggedIn={handleLoggedIn}/>
                ) : null}

                {loggedIn === true ? (
                  <Switch>
                    <Route exact path='/home' component={Home} />
                    <Route exact path='/shift_planner' component={ShiftPlanner} />

                    <Route exact path='/view_notifications' component={Notifications} />

                    <Route exact path='/leadership_notified' component={LeadershipNotified} />
                      <Route exact path='/police_contacted' component={PoliceContacted} />
                        <Route exact path='/please_remember' component={PleaseRemember} />
                          <Route exact path='/before_we_begin' component={BeforeWeBegin} />
                            <Route exact path='/create_or_add' component={CreateOrAdd} />
                              <Route exact path='/report_an_accident' component={ReportAnAccident} />
                        
                        
                        
                        <Route exact path='/reportcollision' component={ReportCollision} />
                        <Route exact path='/reportinjuryaccident' component={ReportInjuryAccident} />
                        <Route exact path='/reportpropertyaccident' component={ReportPropertyAccident} />
                        <Route exact path='/reporthitperson' component={ReportHitPerson} />
                        <Route exact path='/reportinjuryreport' component={ReportInjuryReport} />


                    <Route exact path='/reporting' component={Reporting} />
                    <Route exact path='/productivity' component={Productivity} /> 
                    <Route exact path='/admin_messages' component={Communication} />
                    <Route exact path='/analytics' component={Analytics} />


                    <Route exact path='/settings' component={Settings} />
                      <Route exact path='/account_information' component={AccountInformation} />
                        <Route exact path='/edit_account_information' component={EditAccountInformation} />
                        <Route exact path='/view_accidents' component={ViewAccidents} />
                      <Route exact path='/account_settings' component={AccountSettings} />

                    <Route exact path='/score_card' component={ScoreCard} />
                      <Route exact path='/quality' component={Quality} />
                      <Route exact path='/safetyandcompliance' component={SafetyAndCompliance} />
                      <Route exact path='/team' component={Team} />

                  </Switch>
                ) : null}
              <StatusBar style="auto" />
              </View>
            
            </View>
          </PaperProvider>
        </ApolloProvider>
      </RecoilRoot>
    </NativeRouter>
  );
}

To reiterate, this all worked perfectly whenever running on localhost. However now, whenever we attempt to change the route, nothing happens, and the app is permanently stuck on the domain with the route '/'

Since essentially every file has a route to another I’m not going to paste all of them here. The first example, however, will be the Login.js component. The user is to be rerouted to the '/home' page after successfully logging in

import React, { useEffect, useState } from 'react';
import { useRecoilState } from 'recoil'
import { userState } from '../../../../Recoil/atoms'
import { useHistory } from 'react-router-native';
import { Button } from 'react-native-paper';
import { View } from 'react-native';
import { ButtonStyles } from '../../../../Styles/LandingPageStyles';
import { useMutation } from '@apollo/client';
import { LOGIN } from '../../../../GraphQL/operations';
import stateChange from '../../../../Hooks/handleToken'

const LoginButton = ({ userData, handleLoggedIn }) => {
    const [login, { loading: loading, error: error, data: data }] =
        useMutation(LOGIN);
    const [buttonLoading, setButtonLoading] = useState(false)
    const [user, setUser] = useRecoilState(userState);
    let history = useHistory();

    useEffect( async () => {
        if (!loading && data) {
            await setUser(data.signinDriver)
            await stateChange(data.signinDriver.token);
            await handleLoggedIn()  // Throws an error if improper credentials entered
            await history.push("/home");
        }
    }, [data])

    const handleButtonLoading = () => {
        setButtonLoading(!buttonLoading)
    }

    return (
        <View>
            <View>
                <Button 
                    icon="login" 
                    mode="contained"
                    loading={buttonLoading} 
                    style={ButtonStyles.logInButton}
                    onPress={ async () => {
                        await handleButtonLoading()
                        await login({
                            variables: {
                                email: userData.email,
                                password: userData.password,
                            },
                        });
                    }}
                >
                        Login
                </Button>

            </View>
        </View>
    );
};

export default LoginButton;

Essentially, everywhere I have routing I use await history.push("/whatever_the_route_is"); And since the deployment on Heroku, I get nothing returned from this. Does anybody see a solution to this?

I’ve just setup Appium with Webdriverio and I am having a trouble waiting for the element.
Session ends as soon as app is opened, and I can see from Appium logs that it waits 0ms for the element.

This is my test file login.test.js:

const welcome = require("../../pageObjects/welcome.page");

describe("Login", () => {
  it("Verify user can login", () => {
    driver.setImplicitTimeout(10000); // tried with implicit wait
    driver.pause(3000); // and with explicit wait
    welcome.signInBtn.click();
  });
});

welcome.page.js file:

class WelcomePage {
  /**
   * Define Elements
   */

  get signInBtn() {
    return $("~Sign in");
    
  }
}

module.exports = new WelcomePage();

package.json file:

{
  "name": "appium_js",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "./node_modules/.bin/wdio wdio.conf.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@wdio/cli": "^7.16.13"
  },
  "devDependencies": {
    "@wdio/local-runner": "^7.16.13",
    "@wdio/mocha-framework": "^7.16.13",
    "@wdio/selenium-standalone-service": "^7.16.13",
    "@wdio/spec-reporter": "^7.16.13",
    "@wdio/sync": "^7.16.13"
  }
}

wdio.conf.js file:

let { join } = require("path");

exports.config = {
  
  runner: "local",
  port: 4723,
  path: "/wd/hub",
  
  specs: ["./test/specs/**/*.js"],
 
  maxInstances: 1,
  
  capabilities: [
    {
      platformName: "Android",
      "appium:deviceName": "Pixel XL API 31",
      "appium:app": join(process.cwd(), "./app-dev-debug.apk"),
    },
  ],
  
  logLevel: "info",
  
  
  bail: 0,
  
  
  baseUrl: "http://localhost",
  
  waitforTimeout: 0,
  
  connectionRetryTimeout: 120000,
  
  connectionRetryCount: 3,
  
  services: ["selenium-standalone"],

  
  framework: "mocha",
  
  
  reporters: ["spec"],

  
  mochaOpts: {
    ui: "bdd",
    timeout: 60000,
  }
};

Appium logs:

[W3C (10484f32)] Calling AppiumDriver.findElement() with args: ["accessibility id","Sign in","10484f32-220b-4a22-ae39-9b7c6ff9adfb"]
[BaseDriver] Valid locator strategies for this request: xpath, id, class name, accessibility id, css selector, -android uiautomator
[BaseDriver] Waiting up to 0 ms for condition
[WD Proxy] Matched '/element' to command name 'findElement'
[WD Proxy] Proxying [POST /element] to [POST http://127.0.0.1:8201/wd/hub/session/0b87b7c0-9b19-48ce-9e6e-02c6d5cc8d08/element] with body: {"strategy":"accessibility id","selector":"Sign in","context":"","multiple":false}
[HTTP] --> DELETE /wd/hub/session/10484f32-220b-4a22-ae39-9b7c6ff9adfb
[HTTP] {}
[W3C (10484f32)] Calling AppiumDriver.deleteSession() with args: ["10484f32-220b-4a22-ae39-9b7c6ff9adfb"]
[BaseDriver] Event 'quitSessionRequested' logged at 1642100255280 (19:57:35 GMT+0100 (Central European Standard Time))
[Appium] Removing session 10484f32-220b-4a22-ae39-9b7c6ff9adfb from our master session list
[UiAutomator2] Deleting UiAutomator2 session
[UiAutomator2] Deleting UiAutomator2 server session
[WD Proxy] Matched '/' to command name 'deleteSession'
[WD Proxy] Proxying [DELETE /] to [DELETE http://127.0.0.1:8201/wd/hub/session/0b87b7c0-9b19-48ce-9e6e-02c6d5cc8d08] with no body

Not sure why it doesn’t wait for the element as I’ve tried with implicit and explicit waits? Maybe it has do to with the driver?