Click Record Button at about:tracing through Selenium

See also questions close to this topic

• How can I see post body data in chrome dev tools?

  I have this fetch api in React that is sending data to the server. The server runs PHP and I'm having trouble accessing the data with $_POST or with file_get_contents('php://input');

  So I want to check every step of the process until I can see where the error is. I also want to verify how the post data is being sent. ie I want to see the actual data and the full request from the browser.

  Fetch request looks like this:

  export function sendEmail (data) {
    return fetch('http://example.com/email.php', {
      method: 'POST',
      credentials: 'same-origin',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(data)
    }).then(response => response.json())
  }
  

  When I go into google chrome's dev tools I see the request headers, response, etc but nowhere can I see the actual data being sent. I've looked around online and no one can seem to give a clear answer.
• Writing text into a complex form using selenium-webdriver on MacOS

  I am a newbie at Selenium, and I gave myself a test project to learn the ropes. The objective was to fill out a simple form on Kayak. However, I ran into the following problem:

  When I select (what I believe to be) the element for the airport-origin text box and call sendKeys(), I'm seeing the following error message

  { ElementNotVisibleError: element not interactable ...
  

  I noticed that the output from the following lines:

  console.log('isDisplayed?: ', await elem.isDisplayed());
  // isDisplayed:  false
  console.log('isEnabled?: ', await elem.isEnabled()); 
  // isEnabled: true
  console.log('isSelected?: ', await elem.isSelected());
  // isSelected: false
  

  I've tried messed around with various method to try and select the element and wait for the element to become visible, but I have not yet succeed. Any push in the correct direction would be greatly appreciated. Full source code below.

  const webdriver = require('selenium-webdriver')
  const { By, until, Key } = webdriver;
  const chrome = require('selenium-webdriver/chrome');
  const options = new chrome.Options();
  // options.addArguments("--headless");
  // options.addArguments('--no-sandbox');
  // options.addArguments('--disable-dev-shm-usage');
  const driver = new webdriver.Builder()
      .withCapabilities(webdriver.Capabilities.chrome())
      .setChromeOptions(options)
      .build()
  
  const testTitle = function() {
      return new Promise(function(resolve, reject) {
          driver.getTitle().then(title => {
              const search_term = 'kayak';
              if (title.toLowerCase().search(search_term) >= 0) {
                  console.log('Found ' + search_term + ' in title');
                  return resolve('hey');
              }
              reject('Could not find ' + search_term + ' in title');
          })
          .catch(err => {
              reject('Error fetching title: ' + err.toString());
          })
      })
  }
  
  const validationChecks = function() {
      return Promise.all([testTitle()])
  }
  
  const inputSource = async function() {
      console.log('inputting input source ...'); // change to debug
  
      try {
          const elem = await driver.findElement(By.xpath("//input[contains(@id, 'origin-airport') and @placeholder='From?']"));
          try {
              console.log('isDisplayed?: ', await elem.isDisplayed());
              console.log('isEnabled?: ', await elem.isEnabled());
              console.log('isSelected?: ', await elem.isSelected());
              await elem.sendKeys('Atlanta (ATL)'); // ERROR HERE :((
          } catch (err) {
              console.log(err)
          }
      } catch (err) {
          console.error('Unable to find source element: ' + err.toString());
      }
  }
  
  // Main script
  driver.get('https://www.kayak.com').then(() => {
      validationChecks().then((result) => {
          // Sanity checks
          console.log('All validation checks passed successfully!!');
  
          // Begin filling out kayak form 
          Promise.all([inputSource()]);
      }).catch(err => {
          console.error('One or more validation tests failed :' + err.toString());
      })
  })
  .catch(err => {
      console.error('Error fetching kayak site: ' + err.toString());
  })
  .finally(() => {
      driver.quit().then(() => {
          console.log('Successfully quit driver!!')
      }).catch((err) => {
          console.error('Error quitting driver: ' + err.toString())
      })
  })
  
• Is it possible to instruct the browser not to render/reflow/update the viewport during asynchronous DOM manipulations?

  I have something like this:

  async function async_DOM_manipulations(){
      await DOM_manipulation_1() ;
      await DOM_manipulation_2() ;
      await DOM_manipulation_3() ;
  }
  

  The browser (I'm using Chrome) insist in rendering the page in between the asynchronous DOM_manipulation_x functions.

  But this doesn't look nice. All the user sees is how the GUI changes in several steps for a fraction of a second.

  Is it possible to instruct the browser somehow to stop rendering the page during this process?
• Selenium : Require help on clicking more options in Compose sections

  I require your help, I am practising coding on selenium Java. I click on compose section and entered To,Subject and Body and trying to click on the dotted lines to select label as Social but unable to click on the section.

  Please find the below code. @Test public void testSendEmail() throws Exception { driver.get("https://mail.google.com/");

      WebElement userElement = driver.findElement(By.id("identifierId"));
      userElement.sendKeys(properties.getProperty("username"));
  
      driver.findElement(By.id("identifierNext")).click();
  
      Thread.sleep(1000);
  
      WebElement passwordElement = driver.findElement(By.name("password"));
      passwordElement.sendKeys(properties.getProperty("password"));
      driver.findElement(By.id("passwordNext")).click();
  
      Thread.sleep(1000);
  
      WebElement composeElement = driver.findElement(By.xpath("//div[contains(text(),'Compose')]"));
      composeElement.click();
      WebDriverWait wait=new WebDriverWait(driver, 20);
      wait.until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//textarea[@name='to']")));
      //To Field
      driver.findElement(By.name("to")).clear();
      driver.findElement(By.name("to")).sendKeys(String.format("%s@gmail.com", properties.getProperty("username")));
      //Subject Field
      String emailSubject = properties.getProperty("email.subject");
      driver.findElement(By.xpath("//input[@name='subjectbox']")).sendKeys(emailSubject);
      //Body
      String emailBody = properties.getProperty("email.body"); 
      driver.findElement(By.xpath("//div[@class='Ar Au']//div")).sendKeys(emailBody);
  
          //More options----Line where I am unable to click on the dotted lines to mark label as social.
  
          driver.findElement(By.xpath("//div[@id=':q6']/div[2]")).click();
          Thread.sleep(2000);
          //Hover on Label
          WebElement Label=driver.findElement(By.xpath("(//div[contains(text(),'Label')])[1]"));
          WebElement Social=driver.findElement(By.xpath("//div[contains(text(),'Social')]"));
          Actions a=new Actions(driver);
          a.moveToElement(Label);
          Thread.sleep(5000);
          a.moveToElement(Social).click().build().perform();
          Thread.sleep(5000);
  
  
  
      //Click On Send
       driver.findElement(By.xpath("//*[@role='button' and text()='Send']")).click();
  
• selenium + python + chromedriver.exe does not run as expected, I am setting the binary

  I've got this code:

  options = webdriver.ChromeOptions()
  options.add_argument("--user-data-dir=C:/Users/RvBVakama/AppData/Local/Google/Chrome/User Data")
  options.add_argument("--disable-extensions")
  options.binary_location = "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe"
  
  w = webdriver.Chrome(executable_path="C:/Program Files (x86)/Google/Chrome/Application/chromedriver.exe", options=options)
  
  w.get("https://www.google.com/")
  

  When I run my program without any chrome processes active, it works.

  Another post said it was an issue with a non-default installation of the chrome binary, but my install was installed in the default location. (post here)

  When I run it with any chrome processes active it fails and gives this log:

  Traceback (most recent call last):
    File "tet.py", line 9, in <module>
      w = webdriver.Chrome(executable_path="C:/Program Files (x86)/Google/Chrome/Application/chromedriver.exe", options=options)
    File "C:\Program Files (x86)\Microsoft Visual Studio\Shared\Python36_64\lib\site-packages\selenium\webdriver\chrome\webdriver.py", line 81, in __init__
      desired_capabilities=desired_capabilities)
    File "C:\Program Files (x86)\Microsoft Visual Studio\Shared\Python36_64\lib\site-packages\selenium\webdriver\remote\webdriver.py", line 157, in __init__
      self.start_session(capabilities, browser_profile)
    File "C:\Program Files (x86)\Microsoft Visual Studio\Shared\Python36_64\lib\site-packages\selenium\webdriver\remote\webdriver.py", line 252, in start_session
      response = self.execute(Command.NEW_SESSION, parameters)
    File "C:\Program Files (x86)\Microsoft Visual Studio\Shared\Python36_64\lib\site-packages\selenium\webdriver\remote\webdriver.py", line 321, in execute
      self.error_handler.check_response(response)
    File "C:\Program Files (x86)\Microsoft Visual Studio\Shared\Python36_64\lib\site-packages\selenium\webdriver\remote\errorhandler.py", line 242, in check_response
      raise exception_class(message, screen, stacktrace)
  selenium.common.exceptions.WebDriverException: Message: unknown error: Chrome failed to start: crashed
    (unknown error: DevToolsActivePort file doesn't exist)
    (The process started from chrome location C:\Program Files (x86)\Google\Chrome\Application\chrome.exe is no longer running, so ChromeDriver is assuming that Chrome has crashed.)
    (Driver info: chromedriver=2.45.615291 (ec3682e3c9061c10f26ea9e5cdcf3c53f3f74387),platform=Windows NT 6.1.7601 SP1 x86_64)
  

  My aim is to have my program run in the background once every hour. If my program requires me to close every tab and window just to run my script I would not be nice.

  Thanks :)
• React, <USE> .. xlinkHref no longer works with Chrome v71

  I've had a React SVG component that had been working fine for the last year... In my SVG component, I have a tag like so:

      <use
        innerRef={(ref) => { this.arcRef.icon = ref; }}
        xlinkHref={this.props.xlinkHref}
        width="10"
        height="10"
        x="240.462"
        y="138"
      />
  

  This is rendering in the dom like so:

  <use class="sc-dTLGrV fEJmAu" href="#item-2" width="40px" height="40px" x="240.462" y="138" data-svg-origin="240.462 138" transform="matrix(1,0,0,1,38,-26.5)" style="opacity: 1;"></use>
  

  Chrome recently updated to v71 and now this is no longer working. In the Chrome v71 release notes it mentions "Chrome 71 was updated to support the Shadow DOM v1 spec"

  In the DOM I see the following inside the <use> tag:

  #shadow-root (closed)

  I believe use can no longer find the #item-2 element on the page even though it is there...

  Any ideas on how I can get this working again?
• Event in Angular on (pressup) without overriding highlight feature on mobile

  I'm trying to transfer my app functionality to mobile browser (chrome). What I do on computer is on double click a word is highlighted and inside a tag I have an event on (dblclick) which does something with the highlighted word, and it works flawlessly.

  <div id="someId"  (dblclick)="change()"></div>
  

  I'd like to do the same on mobile browser (chrome) with Hammer.js on (pressup) event, but the problem is that when I try to use it like this:

  <div id="someId"  (pressup)="change()"></div>
  

  the highlight function doesn't work anymore. I also tried selecting word on click/tap and get it's ranges from the place of click/tap, and while it works on plain text in html it doesn't work on shadowDOM (it seems it can't get indexes in shadowDOM), and this is what gets attached to my div. Also tried using @HostListener, but I think it does the same thing as in html. Since the beginning of making my app I could always find what I was looking for on Stackoverflow (which I'm really grateful for), but this time there's nothing. I'd appreciate any help or pointers how to get it to work on mobile.
• Polymer 2 Nested ShadowRoots

  I have a Polymer 2 component that is a parent to multiple Polymer 2 components, each component has it's own shadowRoot.

  From the parent component, is it possible to query a node in one of the nested shadowRoots?

  I believe you can't have element > shadowRoot > shadowRoot but my dom looks like element > shadowRoot > element > shadowRoot...

  I've tried this.shadowRoot.querySelector('id') where id is the id of the element (in the nested shadowRoots) that I'm trying to query.