Symfony Panther VS next.js

Use some library with WebDriver API (f.ex. Symfony Panther if you want to stick to PHP, or Playwright) to run tests against your WP backend

Personal experience: - don’t use Behat unless you really needed a “story telling”, it has a intermediate layer Gherkin that you’ll need to code. You can write “Given/When/Then” steps but you’ll also need to write “php code” that will interpret this step. - using real browser be prepared for instability - any interaction with JavaScript can broken/delay execution - be prepared that this tests are call functional they are the most expensive test, so start small unit then integration and only then functional. - use https://github.com/symfony/panther or https://codeception.com/ you’ll have phpunit alike interface to run them. - you’ll need to reset state of your database each time to provide “isolation” and stability

For headless browser testing with symfony there is symfony panther (https://github.com/symfony/panther)

I did something similar with Symfony Panther combined with ChromeDriver.

For tools, I use PHPUnit, Symfony's PHPUnit helper classes, and Panther (for frontend/headless-browser testing, mostly JS behavior)

If you are comfortable with using composer and third party libraries I would suggest checking out https://github.com/symfony/panther

I like this one recently https://github.com/symfony/panther

Panther

What you're looking for is a package to control a "headless browser". The best one IMO is symfony/panther: https://github.com/symfony/panther

While it's technically possible to do things like compile React entirely out of an exported NextJS site, it's far from trivial and doesn't fit most usage very well. It's certainly a harder mental model at the very least.

Disable all your chrome extensions. As recommended here https://github.com/zeit/next.js/issues/10246

Link: https://github.com/zeit/next.js/blob/canary/examples/with-graphql-faunadb/lib/useFetch.js

import React, { Component, Fragment } from 'react';import { withRouter } from 'next/router';import 'isomorphic-unfetch';class post extends Component { static async getInitialProps({ req }) { try { const res = await fetch(`http://localhost/api/posts/${req.params.postslug}`, { method: 'GET', // *GET, POST, PUT, DELETE, etc. mode: 'cors', // no-cors, cors, *same-origin }); const json = await res.json(); return { data: json.data }; } catch (err) { console.log('err'); } } render() { const { data } = this.props; return ( ); }}export default withRouter(post); I have already checked the next.js docs and it has this implementation which uses the node http module. I implemented this code on express by copying some parts from the documentation example. However it still seems to cause a page reload when i go to the article page using a .

next.js

NextJS: 8.0.3

Read more one the github issue

import React from 'react';import PropTypes from 'prop-types';class VerticalSlider extends React.Component { constructor(props) { super(props); this.ScrollMagic = null; this.controller = null; this.scenes = []; this.container = React.createRef(); } componentDidMount() { if (this.container.current) { // Why "require" here? // https://github.com/zeit/next.js/issues/219#issuecomment-393939863 // We can't render the component server-side, but we will still render // the HTML // eslint-disable-next-line global-require this.ScrollMagic = require('scrollmagic'); this.initScroller(); } } componentWillUnmount() { this.scenes.forEach(scene => { scene.destroy(); }); this.controller.destroy(); this.scenes = []; this.controller = null; } initScroller() { try { this.controller = new this.ScrollMagic.Controller(); if (this.container.current !== null && this.container.current.children) { [...this.container.current.children].forEach(children => { const scene = new this.ScrollMagic.Scene({ triggerElement: children, duration: window.innerHeight * 1.5, triggerHook: 0, reverse: true }); scene.setPin(children); this.scenes.push(scene); }); this.controller.addScene(this.scenes); } } catch (e) { console.log(e); } } render() { return (