<h3 dir="auto">Playwright version</h3>
<p dir="auto">1.12.3</p>
<h3 dir="auto">Operating system</h3>
<p dir="auto">MacOS</p>
<h3 dir="auto">What browsers are you seeing the problem on?</h3>
<p dir="auto">WebKit</p>
<h3 dir="auto">Other information</h3>
<p dir="auto">macOS 10.15.7<br>
node v12.20.0</p>
<h3 dir="auto">What happened? / Describe the bug</h3>
<p dir="auto">On webkit browser, when grabbing <code class="notranslate">innerText</code> additional line feed is added at the end. This happens on parent elements, not on children holding the text directly.</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="&lt;button class=&quot;MuiButton-containedPrimary&quot;&gt;
   &lt;span class=&quot;MuiButton-label&quot;&gt;Primary&lt;/span&gt;
&lt;/button&gt;"><pre class="notranslate"><code class="notranslate">&lt;button class="MuiButton-containedPrimary"&gt;
   &lt;span class="MuiButton-label"&gt;Primary&lt;/span&gt;
&lt;/button&gt;
</code></pre></div>
<p dir="auto">In this example, <code class="notranslate">innerText</code> on <code class="notranslate">span</code> return the text properly, while grabbing <code class="notranslate">innerText</code> from the parent <code class="notranslate">button</code> adds an extra line feed at the end.</p>
<h3 dir="auto">Code snippet to reproduce your bug</h3>
<div class="highlight highlight-source-shell notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="const playwright = require('playwright');
(async () =&gt; {
    const browser = await playwright['webkit'].launch();
    const context = await browser.newContext();
    const page = await context.newPage();
    await page.goto('https://material-ui.com/components/buttons/');
    await page.waitForSelector('text=Buttons allow users to take actions, and make choices, with a single tap');
    const buttonLabel = await page.$(`.MuiButton-containedPrimary .MuiButton-label`);
    console.log(await buttonLabel.innerText()); // &lt;-- Prints &quot;PRIMARY&quot;
    const button = await page.$(`.MuiButton-containedPrimary`);
    console.log(await button.innerText()); // &lt;-- Prints &quot;PRIMARY \n&quot; additional line feed at the end
    await browser.close();
})();"><pre class="notranslate">const playwright = require(<span class="pl-s"><span class="pl-pds">'</span>playwright<span class="pl-pds">'</span></span>)<span class="pl-k">;</span>
(async () =<span class="pl-k">&gt;</span> {
    const browser = await <span class="pl-en">playwright['webkit'].launch</span>();
    const context = await <span class="pl-en">browser.newContext</span>();
    const page = await <span class="pl-en">context.newPage</span>();
    await page.goto(<span class="pl-s"><span class="pl-pds">'</span>https://material-ui.com/components/buttons/<span class="pl-pds">'</span></span>)<span class="pl-k">;</span>
    await page.waitForSelector(<span class="pl-s"><span class="pl-pds">'</span>text=Buttons allow users to take actions, and make choices, with a single tap<span class="pl-pds">'</span></span>)<span class="pl-k">;</span>
    const buttonLabel = await page.<span class="pl-s"><span class="pl-pds">$(</span><span class="pl-s"><span class="pl-pds">`</span>.MuiButton-containedPrimary .MuiButton-label<span class="pl-pds">`</span></span><span class="pl-pds">)</span></span><span class="pl-k">;</span>
    console.log(await <span class="pl-en">buttonLabel.innerText</span>()); // <span class="pl-k">&lt;</span>-- Prints <span class="pl-s"><span class="pl-pds">"</span>PRIMARY<span class="pl-pds">"</span></span>
    const button = await page.<span class="pl-s"><span class="pl-pds">$(</span><span class="pl-s"><span class="pl-pds">`</span>.MuiButton-containedPrimary<span class="pl-pds">`</span></span><span class="pl-pds">)</span></span><span class="pl-k">;</span>
    console.log(await <span class="pl-en">button.innerText</span>()); // <span class="pl-k">&lt;</span>-- Prints <span class="pl-s"><span class="pl-pds">"</span>PRIMARY \n<span class="pl-pds">"</span></span> additional line feed at the end
    await <span class="pl-en">browser.close</span>();
<span class="pl-en">})</span>();</pre></div>
<h3 dir="auto">Relevant log output</h3>
<p dir="auto"><em>No response</em></p>
<p dir="auto"><strong>Context:</strong></p>
<ul dir="auto">
<li>Playwright Version: 1.8.1</li>
<li>Operating System: Mac</li>
<li>Node.js version: 14.15.4</li>
<li>Browser: webkit</li>
</ul>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="test(
    &quot;Log in with mail and password&quot;,
    async () =&gt; {
      await loginPage.login(TestManager.USER_EMAIL, TestManager.USER_PASSWORD);
      expect(await loginPage.getUserName()).toBe(TestManager.USER_NAME);
    },
    TestManager.TIMEOUT
  );

//in LoginPage
async getUserName() {
    return this.page.innerText(&quot;data-test-id=user-menu-button&quot;);
  }"><pre class="notranslate"><code class="notranslate">test(
    "Log in with mail and password",
    async () =&gt; {
      await loginPage.login(TestManager.USER_EMAIL, TestManager.USER_PASSWORD);
      expect(await loginPage.getUserName()).toBe(TestManager.USER_NAME);
    },
    TestManager.TIMEOUT
  );

//in LoginPage
async getUserName() {
    return this.page.innerText("data-test-id=user-menu-button");
  }
</code></pre></div>
<p dir="auto">Hi!<br>
the test above is supposed to get username written on the user menu button via innerText.<br>
when running this test on chromium, it passes. when running it on webkit, it fails, since the innerText received is with two new lines appended to it. meaning: I expect "username" but get "username\n\n". and as I said, on chromium I get "username" as expected.</p>
<p dir="auto">Thanks in advance!</p>
<p dir="auto">attached is the failure log, where you can see the 2 extra new lines.<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/78478421/108180315-4752f800-710f-11eb-9d40-5300fbb8b6a2.png"><img src="https://user-images.githubusercontent.com/78478421/108180315-4752f800-710f-11eb-9d40-5300fbb8b6a2.png" alt="image (1)" style="max-width: 100%;"></a></p>