I'm building a python script to help upload to beatstars quicker, however I'm having an issue locating the correct element to click on. As well as finding the XPATH. As of now I have no issue opening chrome, moving to beatstars, and pressing the upload button, however once doing so a modal pops up with a drag and drop section:
The issue I have is with locating the correct button to click to open browse or if there's a better way like just copying the file directly into the section. This is the html for this.
<mat-dialog-container
tabindex="-1"
aria-modal="true"
class="mat-dialog-container ng-tns-c25-86 ng-trigger ng-trigger-dialogContainer ng-star-inserted"
id="mat-dialog-5"
role="dialog"
style="transform: none"
><ng-component _nghost-jyk-c105="" class="ng-star-inserted"
><mat-dialog-content
_ngcontent-jyk-c105=""
class="mat-dialog-content upload-dialog-content"
><div _ngcontent-jyk-c105="" class="header">
<h3 _ngcontent-jyk-c105="">Single file upload</h3>
<button _ngcontent-jyk-c105="" class="ng-star-inserted" style="">
<i
_ngcontent-jyk-c105=""
class="vb-icon-close-m-regular-solid"
></i></button
><!---->
</div>
<mat-tab-group
_ngcontent-jyk-c105=""
class="mat-tab-group mat-primary ng-star-inserted"
style=""
><mat-tab-header class="mat-tab-header"
><div
aria-hidden="true"
mat-ripple=""
class="mat-ripple mat-tab-header-pagination mat-tab-header-pagination-before mat-elevation-z4 mat-tab-header-pagination-disabled"
>
<div class="mat-tab-header-pagination-chevron"></div>
</div>
<div class="mat-tab-label-container">
<div
role="tablist"
class="mat-tab-list"
style="transform: translateX(0px)"
>
<div class="mat-tab-labels">
<div
role="tab"
mattablabelwrapper=""
mat-ripple=""
cdkmonitorelementfocus=""
class="mat-ripple mat-tab-label mat-focus-indicator mat-tab-label-active ng-star-inserted"
id="mat-tab-label-4-0"
tabindex="0"
aria-posinset="1"
aria-setsize="4"
aria-controls="mat-tab-content-4-0"
aria-selected="true"
aria-disabled="false"
>
<div class="mat-tab-label-content">
<i
_ngcontent-jyk-c105=""
class="vb-icon-cloud-upload-file-m-regular ng-star-inserted"
></i>
Upload
<!----><!----><!---->
</div>
</div>
<div
role="tab"
mattablabelwrapper=""
mat-ripple=""
cdkmonitorelementfocus=""
class="mat-ripple mat-tab-label mat-focus-indicator ng-star-inserted"
id="mat-tab-label-4-1"
tabindex="-1"
aria-posinset="2"
aria-setsize="4"
aria-controls="mat-tab-content-4-1"
aria-selected="false"
aria-disabled="false"
>
<div class="mat-tab-label-content">
<i
_ngcontent-jyk-c105=""
class="vb-icon-drive-m-regular-solid ng-star-inserted"
></i>
Google Drive
<!----><!----><!---->
</div>
</div>
<div
role="tab"
mattablabelwrapper=""
mat-ripple=""
cdkmonitorelementfocus=""
class="mat-ripple mat-tab-label mat-focus-indicator ng-star-inserted"
id="mat-tab-label-4-2"
tabindex="-1"
aria-posinset="3"
aria-setsize="4"
aria-controls="mat-tab-content-4-2"
aria-selected="false"
aria-disabled="false"
>
<div class="mat-tab-label-content">
<i
_ngcontent-jyk-c105=""
class="vb-icon-dropbox-m-regular-solid ng-star-inserted"
></i>
Dropbox
<!----><!----><!---->
</div>
</div>
<div
role="tab"
mattablabelwrapper=""
mat-ripple=""
cdkmonitorelementfocus=""
class="mat-ripple mat-tab-label mat-focus-indicator ng-star-inserted"
id="mat-tab-label-4-3"
tabindex="-1"
aria-posinset="4"
aria-setsize="4"
aria-controls="mat-tab-content-4-3"
aria-selected="false"
aria-disabled="false"
>
<div class="mat-tab-label-content">
<i
_ngcontent-jyk-c105=""
class="vb-icon-link-m-regular-solid ng-star-inserted"
></i>
Import URL
<!----><!----><!---->
</div>
</div>
<!---->
</div>
<mat-ink-bar
class="mat-ink-bar"
style="visibility: visible; left: 0px; width: 160px"
></mat-ink-bar>
</div>
</div>
<div
aria-hidden="true"
mat-ripple=""
class="mat-ripple mat-tab-header-pagination mat-tab-header-pagination-after mat-elevation-z4 mat-tab-header-pagination-disabled"
>
<div class="mat-tab-header-pagination-chevron"></div></div
></mat-tab-header>
<div class="mat-tab-body-wrapper">
<mat-tab-body
role="tabpanel"
class="mat-tab-body ng-tns-c115-87 mat-tab-body-active ng-star-inserted"
id="mat-tab-content-4-0"
aria-labelledby="mat-tab-label-4-0"
><div
cdkscrollable=""
class="mat-tab-body-content ng-tns-c115-87 ng-trigger ng-trigger-translateTab"
style="transform: none"
>
<!----><!----><!----><!----><!----><!----><!---->
<div
_ngcontent-jyk-c105=""
class="step ng-star-inserted"
style=""
>
<div _ngcontent-jyk-c105="" class="drag-drop-container">
<div _ngcontent-jyk-c105="" class="drag-drop-message">
<div _ngcontent-jyk-c105="" class="icons">
<i
_ngcontent-jyk-c105=""
class="vb-icon-cloud-upload-file-m-regular"
></i>
</div>
<h4 _ngcontent-jyk-c105="">
Drag & Drop, or <a _ngcontent-jyk-c105=""> Browse </a>
</h4>
<label
_ngcontent-jyk-c105=""
class="file-type ng-star-inserted"
><!----><span
_ngcontent-jyk-c105=""
class="ng-star-inserted"
>
.mp3 or .wav </span
><!----><!----><!----><!----><!----><!----><!----><!----></label
><!---->
</div>
<div
_ngcontent-jyk-c105=""
id="uppy-drag-drop"
data-qa="uppy_drag_drop"
class="uppy-box"
>
<button
type="button"
class="uppy-Root uppy-u-reset uppy-DragDrop-container uppy-DragDrop--isDragDropSupported"
style="width: 100%; height: 100%"
>
<input
class="uppy-DragDrop-input"
type="file"
hidden=""
name="files[]"
multiple=""
accept="audio/mp3,audio/x-mp3,audio/mpeg,audio/mpeg3,audio/x-mpeg-3,audio/wav,audio/x-wav,audio/wave,audio/x-wave,audio/vnd.wave,application/octet-stream"
/>
<div class="uppy-DragDrop-inner">
<svg
aria-hidden="true"
focusable="false"
class="uppy-c-icon uppy-DragDrop-arrow"
width="16"
height="16"
viewBox="0 0 16 16"
>
<path
d="M11 10V0H5v10H2l6 6 6-6h-3zm0 0"
fillRule="evenodd"
></path>
</svg>
<div class="uppy-DragDrop-label">
Drop files here or
<span class="uppy-DragDrop-browse">browse</span>
</div>
<span class="uppy-DragDrop-note"></span>
</div>
</button>
</div>
</div>
<div _ngcontent-jyk-c105="" class="my-files ng-star-inserted">
<label _ngcontent-jyk-c105=""> My files </label
><bs-secondary-uploaded-files
_ngcontent-jyk-c105=""
_nghost-jyk-c136=""
class="ng-star-inserted"
style=""
><div _ngcontent-jyk-c136="" class="uploaded-files">
<ul
_ngcontent-jyk-c136=""
class="files-uploaded ng-star-inserted"
>
<li
_ngcontent-jyk-c136=""
id="row-0"
class="ng-star-inserted"
>
<div _ngcontent-jyk-c136="" class="left">
<div _ngcontent-jyk-c136="" class="file-type-icon">
<i
_ngcontent-jyk-c136=""
class="icon-music-4"
></i>
</div>
<div _ngcontent-jyk-c136="" class="file-info">
<span _ngcontent-jyk-c136="" class="file-name"
>j-cole-type-beat</span
>
<div
_ngcontent-jyk-c136=""
class="secondary-info ng-star-inserted"
>
<span _ngcontent-jyk-c136="">26.00 MB</span
><span
_ngcontent-jyk-c136=""
class="ng-star-inserted"
> ∙ </span
><!----><span _ngcontent-jyk-c136=""
>Sep 2, 2022, 6:05 PM</span
>
</div>
<!---->
</div>
</div>
<div _ngcontent-jyk-c136="" class="right">
<bs-menu-more-options
_ngcontent-jyk-c136=""
class="menu-more-options"
_nghost-jyk-c93=""
><div
_ngcontent-jyk-c93=""
aria-haspopup="true"
class="mat-menu-trigger wrapper-button"
style="margin-left: 0px; margin-right: 0px"
>
<button
_ngcontent-jyk-c93=""
mat-icon-button=""
class="mat-focus-indicator mat-tooltip-trigger mat-icon-button mat-button-base ng-star-inserted"
aria-describedby="cdk-describedby-message-9"
cdk-describedby-host=""
>
<span class="mat-button-wrapper"
><i
_ngcontent-jyk-c93=""
class="icon-dots ng-star-inserted"
></i
><!----></span
><span
matripple=""
class="mat-ripple mat-button-ripple mat-button-ripple-round"
></span
><span
class="mat-button-focus-overlay"
></span></button
><!----><!---->
</div>
<!----><mat-menu
_ngcontent-jyk-c93=""
class="ng-star-inserted"
><!----></mat-menu
><!----><!----></bs-menu-more-options
><bs-square-button
_ngcontent-jyk-c136=""
buttontype="button"
class="btn-select ng-star-inserted"
_nghost-jyk-c103=""
><button
_ngcontent-jyk-c103=""
bssquarebuttonfocus=""
type="button"
class="action-element primary ng-star-inserted"
>
Select
<!----></button
><!----><!----><!----></bs-square-button
><!----><!---->
</div>
<div
_ngcontent-jyk-c136=""
class="border-bottom"
></div>
</li>
<li
_ngcontent-jyk-c136=""
id="row-1"
class="ng-star-inserted"
>
<div _ngcontent-jyk-c136="" class="left">
<div _ngcontent-jyk-c136="" class="file-type-icon">
<i
_ngcontent-jyk-c136=""
class="icon-music-4"
></i>
</div>
<div _ngcontent-jyk-c136="" class="file-info">
<span _ngcontent-jyk-c136="" class="file-name"
>island-girl</span
>
<div
_ngcontent-jyk-c136=""
class="secondary-info ng-star-inserted"
>
<span _ngcontent-jyk-c136="">27.10 MB</span
><span
_ngcontent-jyk-c136=""
class="ng-star-inserted"
> ∙ </span
><!----><span _ngcontent-jyk-c136=""
>Aug 31, 2022, 10:47 PM</span
>
</div>
<!---->
</div>
</div>
<div _ngcontent-jyk-c136="" class="right">
<bs-menu-more-options
_ngcontent-jyk-c136=""
class="menu-more-options"
_nghost-jyk-c93=""
><div
_ngcontent-jyk-c93=""
aria-haspopup="true"
class="mat-menu-trigger wrapper-button"
style="margin-left: 0px; margin-right: 0px"
>
<button
_ngcontent-jyk-c93=""
mat-icon-button=""
class="mat-focus-indicator mat-tooltip-trigger mat-icon-button mat-button-base ng-star-inserted"
aria-describedby="cdk-describedby-message-9"
cdk-describedby-host=""
>
<span class="mat-button-wrapper"
><i
_ngcontent-jyk-c93=""
class="icon-dots ng-star-inserted"
></i
><!----></span
><span
matripple=""
class="mat-ripple mat-button-ripple mat-button-ripple-round"
></span
><span
class="mat-button-focus-overlay"
></span></button
><!----><!---->
</div>
<!----><mat-menu
_ngcontent-jyk-c93=""
class="ng-star-inserted"
><!----></mat-menu
><!----><!----></bs-menu-more-options
><bs-square-button
_ngcontent-jyk-c136=""
buttontype="button"
class="btn-select ng-star-inserted"
_nghost-jyk-c103=""
><button
_ngcontent-jyk-c103=""
bssquarebuttonfocus=""
type="button"
class="action-element primary ng-star-inserted"
>
Select
<!----></button
><!----><!----><!----></bs-square-button
><!----><!---->
</div>
<div
_ngcontent-jyk-c136=""
class="border-bottom"
></div>
</li>
<li
_ngcontent-jyk-c136=""
id="row-2"
class="ng-star-inserted"
>
<div _ngcontent-jyk-c136="" class="left">
<div _ngcontent-jyk-c136="" class="file-type-icon">
<i
_ngcontent-jyk-c136=""
class="icon-music-4"
></i>
</div>
<div _ngcontent-jyk-c136="" class="file-info">
<span _ngcontent-jyk-c136="" class="file-name"
>island-girl</span
>
<div
_ngcontent-jyk-c136=""
class="secondary-info ng-star-inserted"
>
<span _ngcontent-jyk-c136="">3.69 MB</span
><span
_ngcontent-jyk-c136=""
class="ng-star-inserted"
> ∙ </span
><!----><span _ngcontent-jyk-c136=""
>Aug 31, 2022, 10:47 PM</span
>
</div>
<!---->
</div>
</div>
<div _ngcontent-jyk-c136="" class="right">
<bs-menu-more-options
_ngcontent-jyk-c136=""
class="menu-more-options"
_nghost-jyk-c93=""
><div
_ngcontent-jyk-c93=""
aria-haspopup="true"
class="mat-menu-trigger wrapper-button"
style="margin-left: 0px; margin-right: 0px"
>
<button
_ngcontent-jyk-c93=""
mat-icon-button=""
class="mat-focus-indicator mat-tooltip-trigger mat-icon-button mat-button-base ng-star-inserted"
aria-describedby="cdk-describedby-message-9"
cdk-describedby-host=""
>
<span class="mat-button-wrapper"
><i
_ngcontent-jyk-c93=""
class="icon-dots ng-star-inserted"
></i
><!----></span
><span
matripple=""
class="mat-ripple mat-button-ripple mat-button-ripple-round"
></span
><span
class="mat-button-focus-overlay"
></span></button
><!----><!---->
</div>
<!----><mat-menu
_ngcontent-jyk-c93=""
class="ng-star-inserted"
><!----></mat-menu
><!----><!----></bs-menu-more-options
><bs-square-button
_ngcontent-jyk-c136=""
buttontype="button"
class="btn-select ng-star-inserted"
_nghost-jyk-c103=""
><button
_ngcontent-jyk-c103=""
bssquarebuttonfocus=""
type="button"
class="action-element primary ng-star-inserted"
>
Select
<!----></button
><!----><!----><!----></bs-square-button
><!----><!---->
</div>
<div
_ngcontent-jyk-c136=""
class="border-bottom"
></div>
</li>
<!---->
</ul>
<!----><!---->
</div></bs-secondary-uploaded-files
><!----><!---->
</div>
<!---->
</div>
<!----><!----><!----><!----><!---->
</div></mat-tab-body
><mat-tab-body
role="tabpanel"
class="mat-tab-body ng-tns-c115-88 ng-star-inserted"
id="mat-tab-content-4-1"
aria-labelledby="mat-tab-label-4-1"
><div
cdkscrollable=""
class="mat-tab-body-content ng-tns-c115-88 ng-trigger ng-trigger-translateTab"
style="transform: translate3d(100%, 0px, 0px); min-height: 1px"
>
<!---->
</div></mat-tab-body
><mat-tab-body
role="tabpanel"
class="mat-tab-body ng-tns-c115-89 ng-star-inserted"
id="mat-tab-content-4-2"
aria-labelledby="mat-tab-label-4-2"
><div
cdkscrollable=""
class="mat-tab-body-content ng-tns-c115-89 ng-trigger ng-trigger-translateTab"
style="transform: translate3d(100%, 0px, 0px); min-height: 1px"
>
<!---->
</div></mat-tab-body
><mat-tab-body
role="tabpanel"
class="mat-tab-body ng-tns-c115-90 ng-star-inserted"
id="mat-tab-content-4-3"
aria-labelledby="mat-tab-label-4-3"
><div
cdkscrollable=""
class="mat-tab-body-content ng-tns-c115-90 ng-trigger ng-trigger-translateTab"
style="transform: translate3d(100%, 0px, 0px); min-height: 1px"
>
<!---->
</div></mat-tab-body
><!---->
</div></mat-tab-group
><!----><!----><!----><!----></mat-dialog-content
></ng-component
><!----></mat-dialog-container
>
I'm new to selenium and can't find the write thing to try and click on:
This is my code:
browser = webdriver.Chrome(executable_path='/usr/local/bin/chromedriver')
browser.get(url)
wait = WebDriverWait(browser, 20)
email = browser.find_element(By.ID, "oath-email").send_keys(username, Keys.ENTER)
password = wait.until(EC.presence_of_element_located((By.ID, "userPassword"))).send_keys(password, Keys.ENTER)
new_track = wait.until(EC.presence_of_element_located((By.XPATH, "/html/body/studio-root/div/ng-component/studio-header/header/div/div/bs-square-button/button"))).click()
upload = wait.until(EC.presence_of_element_located((By.XPATH, '/html/body/studio-root/div/ng-component/studio-page-container/div/form/studio-inventory-form-holder/div/studio-panel/div/mat-tab-group/div/mat-tab-body[1]/div/studio-wrapper-track-files/studio-form-files/div/section[1]/div/studio-form-file-box/div/div/div[2]/bs-upload-button/bs-universal-upload-button/div/div/bs-square-button/button'))).click()
drag_and_drop = wait.until(EC.element_to_be_clickable((By.XPATH, '/html/body/div[4]/div[8]/div/mat-dialog-container/ng-component/mat-dialog-content/mat-tab-group/div/mat-tab-body[1]/div/div/div[1]/div[2]/button'))).click()